React component for MathJax
npm install react-mathjax2
React component to display math formulas written in AsciiMath or TeX.
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 (
This is an inline formula written in AsciiMath: { ascii }
);
}
`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 (
{ascii}
);
}
`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\\ximodule.exports = () => {
return (
This is an inline math formula: {'a = b'}
);
}
`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\\ximodule.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 (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