React component for MathJax


1530.1.103 years ago5 years agoMinified + gzip package size for @matejmazur/react-mathjax in KB


React MathJax

(experimental, not maintained, archived)

Why @matejmazur/react-katex?

  • it contains tests
  • KaTeX with React is much better than MathJax
  • supports macros! (example of usage in demo - replacing \cdot with asterisk *)
  • smaller (1.8 kB minified, 920 B gzip)
  • much more readable internal code (no weird quirks with mathjax lib)
  • LaTeX is better than AsciiMath (KaTeX supports only LaTeX math)
  • react and katex are in pkg.devDependencies (user now has power to update dependencies)
  • ...


Here is better maintained repo: https://github.com/wko27/react-mathjax

Quick info

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

Example of usage

Based on the react-mathjax from SamyPesse. The main difference is in updated deps, syntax and extended options (delay of rendering and support for AsciiMath).

How to install

npm install @matejmazur/react-mathjax

How to use

const MathJax = require('@matejmazur/react-mathjax')
const ascii = 'U = 1/(R_(si) + sum_(i=1)^n(s_n/lambda_n) + R_(se))'
const tex = `f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi`

module.exports = () => {
    return (
                    This is an inline math formula: <MathJax.Node inline>{'a = b'}</MathJax.Node>
                    And a block one:


            <MathJax.Context input='tex'>
                    This is an inline math formula: <MathJax.Node inline>{'a = b'}</MathJax.Node>
                    And a block one:



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 (the main difference between this library and react-mathjax from SamyPesse)

options (Object)



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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.