@mauhieu12/react-latex-tera

react-latex-tera

Render LaTeX beautifully in React apps!

Install

npm install --save mathlive-tera
npm install --save @mauhieu12/react-latex-tera

Usage

import Latex from "@mauhieu12/react-latex-tera";
import 'mathlive-tera/static.css'

function Example() {
  return (
    <Latex>We give illustrations for the {1 + 2} processes $e^+e^-$, gluon-gluon and $\\gamma\\gamma \\to W t\\bar b$.</Latex>
  );
}

Note: katex CSS needs to be included in your final bundle. Above example is using import to load css but depending on how the code & styles are built and bundled, it may be different for your case.

delimiters

List of delimiters to look for math you can configure it via delimiters prop: <Latex delimiters={[...]}>

A delimiter

{
  left: "A string which starts the math expression (i.e. the left delimiter)"
  right: "A string which ends the math expression (i.e. the right delimiter)"
  display: "A boolean of whether the math in the expression should be rendered in display mode or not"
}

Default delimiters

[
  { left: '$$', right: '$$', display: true },
  { left: '\\(', right: '\\)', display: false },
  { left: '$', right: '$', display: false },
  { left: '\\[', right: '\\]', display: true },
]

strict

It renders by default non-strict which means it falls back to raw text (without delimiters) in case of error. You can enable strict mode like below, which will throw the error instead.

<Latex strict>{textWithSomeBrokenLatex}</Latex>

License

MIT © mauhieu12