react-latex-next

Render LaTeX beautifully in React apps!

It renders all fragments of LaTeX (between delimiters) in a given text, similar to KaTeX's auto-render.

See the demo.

Install

yarn add react-latex-next

npm install --save react-latex-next

Usage

import 'katex/dist/katex.min.css';
import Latex from 'react-latex-next';

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>

macros

A collection of custom macros. Each macro is a property with a name like \name (written \\name in JavaScript) which maps to a string that describes the expansion of the macro.

macros object is also used to persists macros defined in LaTeX via \gdef, refer to the KaTeX docs for more details (and security implications)

<Latex macros={{ "\\f": "#1f(#2)" }}>{'$\\f\\relax{x} = x$ is rendered using macros'}</Latex>

License

MIT © harunurhan