Skip to content

innodoc/react-mathjax-node

Repository files navigation

react-mathjax-node

A react component that renders MathJax formulars.

Version License

FeaturesInstallationUsageAPILicense

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