react-mathjax-ts
v0.1.2
Published
React component for MathJax with TypeScript support 👌
Downloads
7
Maintainers
Readme
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.