react-latex-next

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: '
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
, right: '
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.
__CODE_BLOCK_4__
macros
A collection of custom macros. Each macro is a property with a name like __INLINE_CODE_5__ (written __INLINE_CODE_6__ in JavaScript) which maps to a string that describes the expansion of the macro.
__INLINE_CODE_7__ object is also used to persists macros defined in __INLINE_CODE_8__ via __INLINE_CODE_9__, refer to the KaTeX docs for more details (and security implications)
__CODE_BLOCK_5__
License
MIT  harunurhan
, 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.

__CODE_BLOCK_4__

macros

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

__INLINE_CODE_7__ object is also used to persists macros defined in __INLINE_CODE_8__ via __INLINE_CODE_9__, refer to the KaTeX docs for more details (and security implications)

__CODE_BLOCK_5__

License

MIT harunurhan