React MathJax

React component to display math formulas written in AsciiMath or TeX.

!Example of usage

Install

``
npm install react-mathjax3 --save
`

Usage

Dynamic rendering of HTML content with embedded math (the only plus in comparison to react-mathjax from wko27)

`jsx
import MathJax from 'react-mathjax3'

const html = '$\\sum\\limits_{i = 0}^n {i^2 } = \\frac{n(n + 1)(2n + 1)}{6}$
Have a good day!';

module.exports = () => {
return (
input='tex'
onLoad={ () => console.log("Loaded MathJax script!") }
onError={ (MathJax, error) => {
console.warn(error);
console.log("Encountered a MathJax error, re-attempting a typeset!");
MathJax.Hub.Queue(
MathJax.Hub.Typeset()
);
} }
script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"
options={ {
messageStyle: 'none',
extensions: ['tex2jax.js'],
jax: ['input/TeX', 'output/HTML-CSS'],
tex2jax: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,
},
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
}
} }
>


);
}
`

Inline display of AsciiMath wrapped in delimiters

`jsx
import MathJax from 'react-mathjax3'

const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
const content = This can be dynamic text (e.g. user-entered) text with ascii math embedded in $$ symbols like $$${ascii}$$

module.exports = () => {
return (
input='ascii'
onLoad={ () => console.log("Loaded MathJax script!") }
onError={ (MathJax, error) => {
console.warn(error);
console.log("Encountered a MathJax error, re-attempting a typeset!");
MathJax.Hub.Queue(
MathJax.Hub.Typeset()
);
} }
script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML"
options={ {
asciimath2jax: {
useMathMLspacing: true,
delimiters: [["$$","$$"]],
preview: "none",
}
} }
>


);
}
`

Inline display of AsciiMath without delimiters

`jsx
import MathJax from 'react-mathjax3'

const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'

module.exports = () => {
return (

This is an inline formula written in AsciiMath: { ascii }

);
}
`

Block display of AsciiMath

`jsx
import MathJax from 'react-mathjax3'

const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'

module.exports = () => {
return (

{ascii}

);
}
`

Inline display of LaTeX

`jsx
import MathJax from 'react-mathjax3'

const tex = f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi

module.exports = () => {
return (

This is an inline math formula: {'a = b'}

);
}
`

Block display of LaTeX

`jsx
import MathJax from 'react-mathjax3'

const tex = f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi

module.exports = () => {
return (

{tex}

);
}
`

API

$3

#### script (String)
- Loads specified link with MathJax library.
- Default: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML

#### input (String)
- Sets type of input.
- Options: tex | ascii
- Default: ascii

#### delay (Number)
- Sets delay between updates.
- Default: 0

#### options (Object)
- Sets MathJax configuration.
- Default: Official MathJax configuration

#### onLoad (Function)
- Triggered after MathJax script finishes loading (but BEFORE children are allowed to render if noGate is set to false)

#### onError (Function)
- Triggered when any Math Processing Error occurs

#### noGate (Boolean)
- Defaults to false`, controls whether to disallow rendering of children components until the MathJax script has finished loading

Acknowledgements

- This project was forked from wko27 (react-mathjax).

License

This project is licensed under the MIT License - see the LICENSE.md file for details.