Necessarily Precedes Mischief

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published


    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-react
    yarn add mathjax-full


    Take a look at the typescript-examples on our GitHub Pages

    import * as React from 'react'
    import { MathComponent } from 'mathjax-react'
    class Example extends React.Component {
      render () {
        return (
          <MathComponent tex={String.raw`\int_0^1 x^2dx`} />


    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 onError prop. 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.

    Moving forward

    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:

    1. 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.
    2. React/MathJax abstract/virtual DOM tree interoperability

    Developer Setup


    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:

    yarn link

    Run install and npm link in the typescript-examples directory to connect the library to the examples.

    cd typescript-examples/
    yarn link mathjax-react


    When working on examples, it is only required to run the following (in typescript-examples/):

    yarn start

    When also working on the library itself, one must also run (in the main directory):

    yarn start

    If rollup is not catching updates to files, the following may work:

    npx rollup -w -c



    Library Source


    Examples using mathjax-react and TypeScript.


    MIT © charliemcvicker


    npm i mathjax-react

    DownloadsWeekly Downloads






    Unpacked Size

    75.8 kB

    Total Files


    Last publish


    • avatar