react-mathjax-preview

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]

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

Installation

Install react-mathjax-preview as a dependency:

``
yarn add 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.

``js
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
$$$$

x + y

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

${asciimath}

class Demo extends Component {
constructor(props) {
super(props);
this.state = {
math: tex
}
render() {
return
}
}
`

Props

$3

Wrapper classname

$3

Wrapper id

$3

Style object

$3

Wrapper tag, "div" is default

$3

MathJax content

$3

Milliseconds to delay display of div, 300 is default

$3

Triggered after delay and div is shown, hopefully typeset has finished

$3

MathJax configuration

$3

Triggered after MathJax script finishes loading before children are allowed to render.

$3

Triggered when any Math Processing Error occurs

$3

DOMPurify configuration object (optional). See https://github.com/cure53/DOMPurify#can-i-configure-dompurify

Development

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.

License

MIT

[build-badge]: https://img.shields.io/travis/mehdisadeghi/react-mathjax-preview/master
[build]: https://travis-ci.org/mehdisadeghi/react-mathjax-preview

[npm-badge]: https://img.shields.io/npm/v/react-mathjax-preview
[npm]: https://www.npmjs.org/package/react-mathjax-preview

[coveralls-badge]: https://img.shields.io/coveralls/mehdisadeghi/react-mathjax-preview/master
[coveralls]: https://coveralls.io/github/mehdisadeghi/react-mathjax-preview