react-latex-next

Render LaTeX in React apps

Usage no npm install needed!

<script type="module">
  import reactLatexNext from 'https://cdn.skypack.dev/react-latex-next';
</script>

README

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