/react-latex-next

Render LaTeX in React apps

Primary LanguageTypeScript

react-latex-next

Render LaTeX in React apps

NPM JavaScript Style Guide

It renders all pieces of LaTeX (between given delimiters) in a given text.

Install

npm install --save react-latex-next

yarn add react-latex-next

Usage

import * as React from 'react'

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

const LaTeX = 'We give illustrations for the three processes $e^+e^-$, gluon-gluon and $\\gamma\\gamma \\to W t\\bar b$.'
class Example extends React.Component {
  render () {
    return (
      <Latex>{LaTeX}<Latex/>
    )
  }
}

delimiters

List of delimiters to look for math. Each delimiter has three properties, you can configure it via delimiters prop: <Latex delimiters={[...]}>

Each delimiter must have following structure:

{
  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 list:

[
  { 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