react-mathjax-node

A react component that renders MathJax formulars.

Features • Installation • Usage • API • License

This library aims to deliver high performance and ease-of-use while still being flexible in terms of configuration. Multiple areas in the same application can be handled independently of each other. react-mathjax-node hides all the hairy details of integrating MathJax with React.

Check out the examples.

Features

• Uses MathJax version 3.
• Supports multiple MathJax-enabled areas that are managed independently.
• Integrates well with your webpack setup.
• Self-contained, CDN-less hosting possible.

Installation

$ npm install @innodoc/react-mathjax-node # or
$ yarn add @innodoc/react-mathjax-node

Usage

You need at least one MathJax.Provider and a MathJax.MathJaxNode.

import MathJax from '@innodoc/react-mathjax-node'

<MathJax.Provider>
  <p>
    Example formular: <MathJax.MathJaxNode displayType="inline" texCode="f(x)=x^2" />
  </p>
</MathJax.Provider>

See the examples for other ways of using react-mathjax-node.

API

Components

MathJax.MathJaxNode

The main component you will need most of the time.

<MathJax.MathJaxNode displayType="display" texCode="x^2" />

| Prop | Description | Type | Default | | --------------- | ------------------------------------- | -------- | -------------- | | classNameHide | className while typesetting. | string | null | | classNameShow | className when done typesetting. | string | null | | texCode | TeX code to typeset. | string | '' | | displayType | display (block) or inline element | string | 'inline' |

MathJax.Context

Access the MathJax rendering context.

Every MathJax formular needs to have a MathJax.Provider somewhere up the component tree. Within this subtree you can access the context to have more control.

const { addCallback, removeCallback, typesetDone } = useContext(MathJax.Context)

| Property | Description | Type | | ---------------- | ------------------------------------------------------------------------------------------------------------------ | ---------- | | addCallback | Add a callback when all formulars are typeset. (Example) | function | | removeCallback | Remove callback. | function | | typesetDone | If all formulars are typeset. (Example) | Boolean |

MathJax.Provider

The Provider manages all formulars in its component sub-tree.

There can be an arbitrary number of Providers in your application. So you can have different areas with formulars and distinct display logic if needed.

MathJax.ConfigProvider

Use the ConfigProvider to customize the MathJax options.

Using the ConfigProvider is completely optional. It gives you freedom to customize the MathJax configuration options. You should only have one ConfigProvider in your component tree as there will be one instance of MathJax for the entire application. Make sure all used MathJax.Providers are somewhere in the component sub-tree of your ConfigProvider. Typically the ConfigProvider would reside somewhere near the top of your component tree.

  <MathJax.ConfigProvider options={myCustomMathJaxOptions}>
    <MathJax.Provider>
      <MathJax.MathJaxNode texCode="..." />
    </MathJax.Provider>
    <MathJax.Provider>
      <MathJax.MathJaxNode texCode="..." />
    </MathJax.Provider>
  </MathJax.ConfigProvider>

Please refer to the MathJax documentation for a full description of the MathJax configuration options.

See the example on how to customize the font URL.

MathJax.useMathJax

React hook that adds MathJax typesetting capabilities.

Typically you should just use MathJaxNode which uses useMathJax under the hood.

const MathJaxComponent = () => {
  const ref = useMathJax('x^2')
  return <span ref={ref} />
}

| Argument | Description | Type | Default | | ------------- | ----------------------| --------------------- | ---------- | | texCode | TeX code to typeset. | string | '' | | displayType | Element display Type. | inline or display | 'inline' |

License

MIT