How to Write Math Equations in ReactJS with React Batter MathJax

Mathematics is a crucial aspect of many scientific fields, and it's essential to convey mathematical concepts accurately and effectively. However, writing math equations in web applications can be challenging. Fortunately, there are libraries available that can simplify the process, such as React Batter MathJax.

In this blog, we'll go through how to use React Batter MathJax to write math equations in ReactJS with ease.

What is React Batter MathJax?

React Batter MathJax is a React component library that uses MathJax to display mathematical notation in web applications. MathJax is a popular library for displaying math equations in HTML and LaTeX, and it's supported by a wide range of web browsers.

React Batter MathJax simplifies the process of rendering mathematical equations in ReactJS. It's easy to use and can be integrated into your React application with minimal effort.

When you are working on react project and you need to add equation to it. it is very difficult to do that. so there is a package called better-react-mathjax is available.

Getting Started with React Batter MathJax

Before we begin, let's make sure we have a React application set up. If you don't have one yet, you can follow the official React documentation to set up a new React project.

npx create-react-app math-react

Once you have a React application set up, you can install React Batter MathJax using npm or yarn. Run the following command in your terminal:

npm install better-react-mathjax
# or 
yarn add better-react-mathjax

After installing React Batter MathJax, you can create equations in your React application like this:

Adding Better React MathJax Components:

Better React MathJax introduces two React components - MathJaxContext and MathJax. For MathJax to work with React, follow the steps given below:

Step 1: Import the MathJaxContext and MathJax components:

import { MathJaxContext, MathJax } from 'better-react-mathjax';

Step 2: Wrap your entire app in a MathJaxContext component (only use one in your app):

const App = () => {

   return (
       <MathJaxContext>
           <!-- APP CONTENT -->
       </MathJaxContext>
   )
}

Step 3: Use the MathJax component at different levels for the actual math:

const Component = () => {

   return (
       <div>
           <MathJax>{ /* math content */ }</MathJax>
           <h3>This is a header</h3>
           <MathJax>
               <div>
                   <h4>This is a subheader</h4>
                   <span>{ /* math content */ }</span>
                   <h4>This is a second subheader</h4>
                   <span>{ /* math content */ }</span>
                   ...
               </div>
           </MathJax>
           <p>
               This is text which involves math <MathJax>{ /* math content */ }</MathJax> inside the paragraph.
           </p>
       </div>
   )
}

Note: The content of a MathJax component can be everything from a subtree of the DOM to a portion of text in a long paragraph. If you have a lot of math, try to wrap as much as possible in the same MathJax component.

Examples:

Here are some examples to help you get started with Better React MathJax.

Basic example with Latex:

Standard setup using MathJax version 3 with default MathJax config and no extra options:

import { MathJax } from 'better-react-mathjax';

function App() {
  return (
    <MathJax>
      {'\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)'}
    </MathJax>
  );
}

Basic example with AsciiMath

export default function App() {
    const config = {
        loader: { load: ["input/asciimath"] }
    };
    
    return (
        <MathJaxContext config={config}>
            <h2>Basic MathJax example with AsciiMath</h2>
            <MathJax>{"`frac(10)(4x) approx 2^(12)`"}</MathJax>
        </MathJaxContext>
    );
}

Example with AsciiMath + Latex In Same Block:

add the following config to component

const config = {
    loader: { load: ["input/asciimath"] },
    asciimath: {
      displaystyle: true,
      delimiters: [
        ["$", "$"],
        ["`", "`"]
      ]
    }
  };

After that provide config to MathContaxt

import { MathJax, MathJaxContext } from "better-react-mathjax";

const config = {
    loader: { load: ["input/asciimath"] },
    asciimath: {
      displaystyle: true,
      delimiters: [
        ["$", "$"],
        ["`", "`"]
      ]
    }
  };
const Main = () => {
    return (
      <div>
        <MathJaxContext version={3} config={config}>
        <MathJax hideUntilTypeset={"first"}>
             {`this is block latex
                \\[\\sum_{n = 100}^{1000}\\left(\\frac{10\\sqrt{n}}{n}\\right)\\]` } 

                {`
                this is inline latex
              \\(x\\) or \\(\\frac{25x}{10} = 2^{10}\\)   `  } 
              <br/>
              {`
              this is inline ascii       
              \`sum_(n = 100)^(1000)(frac(10sqrt(n))(n))\``  }                    

             <p style={{ textAlign: "center" }}>
                this is block asciimath
             `sum_(n = 100)^(1000)(frac(10sqrt(n))(n))`
             </p>                                                      
        </MathJax>
        </MathJaxContext>
      </div>
    )
  }
 
  export default Main

Note:-

• Use ` \\<latex code>\\) ` for inline latex
• Use ` \`<ASCII code>\`` to use inline ASCII.
• Use `<ASCII code>` to use block ASCII.
• Use `\\[\\<latex code>\\]` to use block latex.

replace <latex code> with your math code.

Conclusion

In conclusion, adding mathematical equations to a React application can be challenging. However, with the help of the better-react-mathjax package, this task can be simplified. In this blog, we have learned how to set up a React application and install better-react-mathjax. We have also seen how to add MathJaxContext and MathJax components to the application and use them to display LaTeX and ASCII math equations. By following the steps outlined in this blog, you can effortlessly write mathematical equations in your React applications using React better-mathjax.