React Component Library for MathJax
For a lightweight, build-your-own alternative, check out this gist.
Install the mathjax-react package:
npm install --save mathjax-react
Install MathJax-full as a sibling dependency. This lets your bundler shake the mathjax-full tree and reduce bundle size.
npm install --save mathjax-full
Or, use yarn:
yarn add mathjax-reactyarn add mathjax-full
Currently, this library contains one component, called the
MathComponent. This is how you can interact with MathJax.
tex: string: Use this prop when you want to typeset a TeX/LaTeX equation. Leave it empty if you are using MathML. If you are using TeX, place the source code for your TeX in this property. See the live typesetting example.
mathml: string: Use this prop when you want to typeset a MathML equation. Leave it empty if you are using TeX. If you are using MathML, place the source code for your MathML in this property. See the live typesetting example.
display: boolean: This controls the inline vs. block styling of the result. The default value is true, meaning block. If you would like an inline equation, set this property to false. See the basic typesetting example.
onError: string => void: This property contains a function to be called on a typesetting/compilation error. The string passed into this handler will be the error generated by MathJax. The default behavior is to do nothing. See the live typesetting example.
onSuccess: () => void: This property contains a function to be called whenever the equation is successfully updated. This is useful for cleaning up after displaying errors with the
onErrorprop. See the live typesetting example.
settings: any: This property allows you to send your own render settings to MathJax. It should be an object with string keys. To learn more, consult the MathJax documentation.
For the most part, future development of this product is dependent on feature requests. If something is missing, please don't hesitate to open up an issue / feature request on this GitHub. If all is going smoothly, here are some of my goals going forward:
- Provider/Node model: As time allows, I hope to add support for a provider/node model, which might be familiar for people who've used React bindings for MathJax version 2. This would greatly increase performance and it's at the top of my list.
- React/MathJax abstract/virtual DOM tree interoperability
Make sure everything is installed in the main directory:
Build the main directory so that we can link:
npx rollup -c
Run npm link in the main directory to create a global symlink:
Run install and npm link in the
typescript-examples directory to connect the library to the examples.
cd typescript-examples/yarn link mathjax-reactyarn
When working on examples, it is only required to run the following (in
When also working on the library itself, one must also run (in the main directory):
If rollup is not catching updates to files, the following may work:
npx rollup -w -c
MIT © charliemcvicker