Necessarily Precedes Mischief

# npm

## mathjax-react

1.0.6 • Public • Published

# mathjax-react

React Component Library for MathJax

For a lightweight, build-your-own alternative, check out this gist.

## Install

Install the mathjax-react package:

Install MathJax-full as a sibling dependency. This lets your bundler shake the mathjax-full tree and reduce bundle size.

Or, use yarn:

## Usage

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

## Reference

Currently, this library contains one component, called the MathComponent. This is how you can interact with MathJax.

### MathComponent

#### Props

• 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

### Install

Make sure everything is installed in the main directory:

Build the main directory so that we can link:

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.

### Usage

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

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:

## Manifest

### src/

Library Source

### typescript-examples

Examples using mathjax-react and TypeScript.

## Keywords

### Install

npm i mathjax-react

### Repository

github.com/charliemcvicker/mathjax-react

723

1.0.6

MIT

75.8 kB

14