Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-mathjax-preview with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactMathjaxPreview = require("react-mathjax-preview")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-mathjax-preview v0.1.9

The MathJax React component you were looking for.

react-mathjax-preview

Travis npm package

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free