Skip to content
The MathJax React component you were looking for.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
tests
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
nwb.config.js
package.json
react-mathjax-preview.sublime-project
yarn.lock

README.md

react-mathjax-preview

Travis npm package

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

Installation

Install react-mathjax-preview as a dependency:

npm install react-mathjax-preview

Usage

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} />
  }
}

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

git clone https://github.com/mehdisadeghi/react-mathjax-preview && cd react-mathjax-preview
npm install
npm run start

And browse to localhost:3000.

License

MIT

You can’t perform that action at this time.