React component for MathJax with possibility of dynamic html rendering
npm install react-mathjax3
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