react-mathjax-ts

React MathJax

React component to display math formulas written in AsciiMath or TeX.

Install

yarn add react-mathjax-ts

Usage

Inline display of AsciiMath wrapped in delimiters

import MJ from 'react-mathjax-ts'
 
const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
const content = `This can be dynamic text (e.g. user-entered) text with ascii math embedded in $$ symbols like $$${ascii}$$`
 
export const Formula: React.FC = () => (
    <MJ.Context
        input="ascii"
        onLoad={() => console.log('Loaded MathJax script!')}
        onError={(MathJax: any, error: any) => {
            console.warn(error);
            console.log('Encountered a MathJax error, re-attempting a typeset!');
            MJ.Hub.Queue(
                MJ.Hub.Typeset()
            );
        }}
        script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MJ.js?config=AM_HTMLorMML"
        options={{
            asciimath2jax: {
                    useMathMLspacing: true,
                    delimiters: [['$$', '$$']],
                    preview: 'none',
                    messageStyle: 'none'
            },
            messageStyle: 'none'
        }}
    >
        <MJ.Text text={ content } />
    </MJ.Context>
);

Inline display of AsciiMath without delimiters

import MJ from 'react-mathjax-ts'
 
const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
 
export const Formula: React.FC = () => (
    <div>
        <MJ.Context input='ascii'>
            <div>
                This is an inline formula written in AsciiMath: <MJ.Node inline>{ ascii }</MJ.Node>
            </div>
        </MJ.Context>
    </div>
);

Block display of AsciiMath

import MJ from 'react-mathjax-ts'
 
const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
 
export const Formula: React.FC = () => (
    <div>
        <MJ.Context input='ascii'>
            <div>
                <MJ.Node>{ascii}</MJ.Node>
            </div>
        </MJ.Context>
    </div>
);

Inline display of LaTeX

import MJ from 'react-mathjax-ts'
 
const tex = `f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi`
 
export const Formula: React.FC = () => (
    <div>
        <MJ.Context input='tex'>
            <div>
                This is an inline math formula: <MJ.Node inline>{'a = b'}</MJ.Node>
            </div>
        </MJ.Context>
    </div>
);

Block display of LaTeX

import MJ from 'react-mathjax-ts'
 
const tex = `f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi`
 
export const Formula: React.FC = () => (
    <div>
        <MJ.Context input='tex'>
            <div>
                <MJ.Node>{tex}</MJ.Node>
            </div>
        </MJ.Context>
    </div>
);

API

MJ.Context props

script (String)

• Loads specified link with MathJax library.
• Default: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MJ.js?config=TeX-MML-AM_CHTML

input (String)

• Sets type of input.
• Options: tex | ascii
• Default: ascii

delay (Number)

• Sets delay between updates.
• Default: 0 (the main difference between this library and react-mathjax from SamyPesse)

options (Object)

• Sets MathJax configuration.
• Default: Official MathJax configuration

onLoad (Function)

• Triggered after MathJax script finishes loading (but BEFORE children are allowed to render if noGate is set to false)

onError (Function)

• Triggered when any Math Processing Error occurs

noGate (Boolean)

• Defaults to false, controls whether to disallow rendering of children components until the MathJax script has finished loading

Acknowledgements

• This project was forked from wko27 (react-mathjax).

License

This project is licensed under the MIT License - see the LICENSE.md file for details.