The MathJax React component you were looking for.
Switch branches/tags
Nothing to show
Clone or download
mehdisadeghi Merge pull request #8 from dpikt/patch-1
Relax react peer dependency
Latest commit 4d24619 Apr 24, 2018


Travis npm package

react-mathjax-preview provides one React component to render MathML, TeX or ASCIImath formulas. See demo.


Install react-mathjax-preview as a dependency:

npm install 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="" display="block">
    <menclose notation="circle box">
      <mi> x </mi><mo> + </mo><mi> y </mi>

  $$\lim_{x \to \infty} \exp(-x) = 0$$


class Demo extends Component {
  constructor(props) {
    this.state = {
      math: tex
  render() {
    return <MathJax math={this.state.math} />

See demo for a complete example. You can also play with the demo:

git clone && cd react-mathjax-preview
npm install
npm run start

And browse to localhost:3000.