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 three processes $e^+e^-$, gluon-gluon and $\\gamma\\gamma \\to W t\\bar b$.</Latex>
  )
}

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 © harunurhan