Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asnunes/mathjax3-react
React component to load MathJax v3 and process raw ASCIImath and TeX formulas or HTML content.
https://github.com/asnunes/mathjax3-react
Last synced: 2 months ago
JSON representation
React component to load MathJax v3 and process raw ASCIImath and TeX formulas or HTML content.
- Host: GitHub
- URL: https://github.com/asnunes/mathjax3-react
- Owner: asnunes
- License: mit
- Created: 2020-02-08T19:13:05.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T20:43:12.000Z (9 months ago)
- Last Synced: 2024-04-25T12:20:20.848Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.04 MB
- Stars: 12
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# MathJax3 - React
React component to easily load MathJax **v3** and process **dynamically** raw ASCIIMath, TeX or MathML content.
## Installation
NPM:
`npm install mathjax3-react --save`
YARN:
`yarn add mathjax3-react`
## Basic usage
#### From HTML String
```javascript
import React from 'react';
import { MathJaxProvider, MathJaxHtml } from 'mathjax3-react';
function App() {
return (
);
}
```
HTML string:
```javascript
const html = `
Let's analise this equation:
r
2
+
z
2
=
4
`;
```
Result:
### TeX or AsciiMath formula
```javascript
import React from 'react';
import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
function basicUsage() {
return (
);
}
export default basicUsage;
```
Result:
## MathJaxProvider Component
The `MathJaxProvider` component must be used as a parent for the `MathJaxHtml` and `MathJaxFormula` components. This is essential because `MathJaxProvider` is responsible for loading the MathJax script, which the `MathJaxHtml` or `MathJaxFormula` components will consume and utilize.
**Rationale Behind This Design**
Loading MathJax is a resource-intensive process. To optimize performance, `MathJaxProvider` should be placed high in your component hierarchy to load the MathJax script only once. This approach prevents the script from being reloaded unnecessarily and allows `MathJaxHtml` and `MathJaxFormula` components to operate within contexts that update more frequently, thereby leveraging the pre-loaded MathJax script efficiently.
```tsx
import React from 'react';
import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
function MathInterleavedWithText() {
return (
Consider the following integral as an example:
Euler's identity is an astonishing formula in the field of mathematics:
{/* More content and formulas can be added here */}
);
}
function App() {
return (
Mathematical Concepts
);
}
export default App;
```
### Custom options
You can set custom script url or MathJax by sending them as props to `MathJax.Provider` component
```javascript
import React from 'react';
import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
function customOptions() {
return (
);
}
export default customOptions;
```
Result:
**Which options are available?**
Options props are exactly the same options used in MathJax lib. So you can use [official MathJax documentation](https://docs.mathjax.org/en/latest/web/configuration.html) to set custom options.
### Custom Input
```javascript
import React, { useState } from 'react';
import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';
function CustomInput() {
const [value, setValue] = useState('\\int_{-\\infty}^{+\\infty} e^{-x^2} dx = \\sqrt{\\pi}');
return (
Custom Math Input
setValue(e.target.value)} style={{ width: '100%' }} />
);
}
export default CustomInput;
```