React MathJax


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

!Example of usage

Install

``
npm install react-mathjax2 --save
`

Usage

Inline display of AsciiMath wrapped in delimiters

`jsx
import MathJax from 'react-mathjax2'

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-mathjax2'

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

module.exports = () => {
return (



);
}
`

Block display of AsciiMath

`jsx
import MathJax from 'react-mathjax2'

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

module.exports = () => {
return (



);
}
`

Inline display of LaTeX

`jsx
import MathJax from 'react-mathjax2'

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

module.exports = () => {
return (



);
}
`

Block display of LaTeX

`jsx
import MathJax from 'react-mathjax2'

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

module.exports = () => {
return (



);
}
`

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 (the main difference between this library and react-mathjax from SamyPesse)

#### 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 MatejMazur (react-mathjax).

License

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