‚̧Normally Pleasant Mixture
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    react-mathjax-ts
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    React MathJax

    npm version

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

    Example of usage

    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)

    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-mathjax-ts

    DownloadsWeekly Downloads

    10

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    176 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar