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:

!basic html example

$3

`javascript
import React from 'react';
import { MathJaxProvider, MathJaxFormula } from 'mathjax3-react';

function basicUsage() {
return (


);
}

export default basicUsage;
`

Result:

!basic formula example

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 (


);
}

function App() {
return (

Mathematical Concepts

);
}

export default App;
`

$3

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:

!custom formula example

Which options are available?

Options props are exactly the same options used in MathJax lib. So you can use official MathJax documentation to set custom options.

$3

`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 (


);
}

export default CustomInput;
``