react-mathjax-preview provides one React component to render MathML, TeX or ASCIImath formulas. See demo.
Install react-mathjax-preview as a dependency:
yarn add react-mathjax-preview
Import the package and fill the math property with some text containing your formals. Wrap TeX in $ or $$ and ASCIImath in `. Paste MathML as is.
import React, {Component} from 'react'
import {render} from 'react-dom'
import MathJax from 'react-mathjax-preview'
const asciimath = '`sum_(i=1)^n i^3=((n(n+1))/2)^2`' # Because of the backtick
const math = String.raw`
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<menclose notation="circle box">
<mi> x </mi><mo> + </mo><mi> y </mi>
</menclose>
</math>
$$\lim_{x \to \infty} \exp(-x) = 0$$
${asciimath}`
class Demo extends Component {
constructor(props) {
super(props);
this.state = {
math: tex
}
render() {
return <MathJax math={this.state.math} />
}
}Wrapper classname
Wrapper id
Style object
Wrapper tag, "div" is default
MathJax content
Milliseconds to delay display of div, 300 is default
Triggered after delay and div is shown, hopefully typeset has finished
MathJax configuration
Triggered after MathJax script finishes loading before children are allowed to render.
Triggered when any Math Processing Error occurs
DOMPurify configuration object (optional). See https://github.com/cure53/DOMPurify#can-i-configure-dompurify
Clone the repo and run yarn commands available in the package.json file.
$ git clone https://github.com/mehdisadeghi/react-mathjax-preview && cd react-mathjax-preview
$ yarn install // install dependencies
$ yarn start // start the development server which serves the demo page
$ yarn build // make a production build inside the dist folder
$ yarn build:demo // make a demo build inside the dist folder
And browse to localhost:3000.
MIT