How to display Math Symbols in React

Last updated on December 26, 2020 A Goodman Loading... Post a comment

When you build a React application for the natural sciences and math, it is obvious that you will have to display formulas, equations, statements, etc, with lots of special characters like radical symbol, pi, exponent, integral, etc.

This article will go over a few ways to display mathematical notations.

Using react-mathjax

This library is based on MathJax, a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup.

Install react-mathjax by running:

npm i react-mathjax

Example:

// App.js
import React from 'react';

// import react-mathjax
import MathJax from 'react-mathjax';

const App = () => {
  const inlineFormula = `k_{n+1} = n^2 + k_n^2 - k_{n-1}`;
  const blockFormula = `\\int_0^\\infty x^2 dx`; 

  return <div style={{padding: 50}}>
    <MathJax.Provider>
      <div>
        <p>Inline formula: <MathJax.Node inline formula={inlineFormula} /></p>
        <hr></hr>
        <p>Block formula:</p>
        <MathJax.Node formula={blockFormula} />
      </div>
    </MathJax.Provider>
  </div>;
};

export default App;

Output:

Note: To compose math and science documents with react-mathjax, you need to know the LaTeX syntax. If you are not familiar with them, you can learn more here.

Using react-katex

This one is based on KaTeX, a cross-browser JavaScript library that displays mathematical notation in web browsers without the full LaTeX infrastructure, initially developed by Khan Academy.

To install react-katex, run:

npm i react-katex

To use react-katex in React, besides importing the required components, you also need to import its CSS file manually:

import 'katex/dist/katex.min.css';

Eample:

// App.js
import React from 'react';

import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex';

const App = () => {
  const inlineFormula = '\\cos (2\\theta) = \\cos^2 \\theta - \\sin^2 \\theta';
  const blockFormula = `\\frac{n!}{k!(n-k)!} = \\binom{n}{k}`;

  return <div style={{padding: 50}}>
      <div>
        <p>Inline formula: <InlineMath math={inlineFormula} /></p>
        <hr></hr>
        <p>Block formula:</p>
        <BlockMath math={blockFormula} />
      </div>
  </div>;
};

export default App;

Output:

You can learn more about KaTex syntax here.

If you look closely, you will notice the appearance of double-slashes instead of slashes.

Conclusion

Using libraries to render math characters saves us a lot of time and effort so we can focus on many other important things when building a React application. To learn more about React and React Native, check out our React category page and React Native category page for more tutorials and examples.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x