npm

Need private packages and team management tools?Check out npm Orgs. »

react-mathjax3

0.0.3 • Public • Published

React MathJax

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

Example of usage

Install

npm install react-mathjax3 --save

Usage

Dynamic rendering of HTML content with embedded math (the only plus in comparison to react-mathjax from wko27)

import MathJax from 'react-mathjax3'
 
const html = '$\\sum\\limits_{i = 0}^n {i^2 } = \\frac{n(n + 1)(2n + 1)}{6}$<br>Have a good day!';
 
module.exports = () => {
    return (
        <MathJax.Context
            input='tex'
            onLoad={ () => console.log("Loaded MathJax script!") }
            onError={ (MathJax, error) => {
                console.warn(error);
                console.log("Encountered a MathJax error, re-attempting a typeset!");
                MathJax.Hub.Queue(
                  MathJax.Hub.Typeset()
                );
            } }
            script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"
            options={ {
                messageStyle: 'none',
                extensions: ['tex2jax.js'],
                jax: ['input/TeX', 'output/HTML-CSS'],
                tex2jax: {
                    inlineMath: [['$', '$'], ['\\(', '\\)']],
                    displayMath: [['$$', '$$'], ['\\[', '\\]']],
                    processEscapes: true,
                },
                TeX: {
                    extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
                }
            } }
        >
            <MathJax.Html html={ html } />
        </MathJax.Context>
    );
}

Inline display of AsciiMath wrapped in delimiters

import MathJax from 'react-mathjax3'
 
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}$$`
 
module.exports = () => {
    return (
        <MathJax.Context
            input='ascii'
            onLoad={ () => console.log("Loaded MathJax script!") }
            onError={ (MathJax, error) => {
                console.warn(error);
                console.log("Encountered a MathJax error, re-attempting a typeset!");
                MathJax.Hub.Queue(
                  MathJax.Hub.Typeset()
                );
            } }
            script="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML"
            options={ {
                asciimath2jax: {
                     useMathMLspacing: true,
                     delimiters: [["$$","$$"]],
                     preview: "none",
                }
            } }
        >
            <MathJax.Text text={ content }/>
        </MathJax.Context>
    );
}

Inline display of AsciiMath without delimiters

import MathJax from 'react-mathjax3'
 
const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
 
module.exports = () => {
    return (
        <div>
            <MathJax.Context input='ascii'>
                <div>
                    This is an inline formula written in AsciiMath: <MathJax.Node inline>{ ascii }</MathJax.Node>
                </div>
            </MathJax.Context>
        </div>
    );
}

Block display of AsciiMath

import MathJax from 'react-mathjax3'
 
const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
 
module.exports = () => {
    return (
        <div>
            <MathJax.Context input='ascii'>
                <div>
                    <MathJax.Node>{ascii}</MathJax.Node>
                </div>
            </MathJax.Context>
        </div>
    );
}

Inline display of LaTeX

import MathJax from 'react-mathjax3'
 
const tex = `f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi`
 
module.exports = () => {
    return (
        <div>
            <MathJax.Context input='tex'>
                <div>
                    This is an inline math formula: <MathJax.Node inline>{'a = b'}</MathJax.Node>
                </div>
            </MathJax.Context>
        </div>
    );
}

Block display of LaTeX

import MathJax from 'react-mathjax3'
 
const tex = `f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi`
 
module.exports = () => {
    return (
        <div>
            <MathJax.Context input='tex'>
                <div>
                    <MathJax.Node>{tex}</MathJax.Node>
                </div>
            </MathJax.Context>
        </div>
    );
}

API

MathJax.Context props

script (String)

  • Loads specified link with MathJax library.
  • Default: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.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

options (Object)

onLoad (Function)

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

onError (Function)

noGate (Boolean)

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

Acknowledgements

License

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

install

npm i react-mathjax3

Downloadsweekly downloads

2

version

0.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability