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

``bash
yarn add react-latex-next

npm install --save react-latex-next
`

Usage

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

function Example() {
return (
We give illustrations for the {1 + 2} processes $e^+e^-$, gluon-gluon and $\\gamma\\gamma \\to W t\\bar b$.
);
}
`

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.

$3

List of delimiters to look for math you can configure it via delimiters prop:

#### A delimiter

`js
{
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

`js
[
{ left: '$$', right: '$$', display: true },
{ left: '\\(', right: '\\)', display: false },
{ left: '$', right: '$', display: false },
{ left: '\\[', right: '\\]', display: true },
]
`

$3

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.

`jsx
{textWithSomeBrokenLatex}
`

$3

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)

`jsx
{'$\\f\\relax{x} = x$ is rendered using macros'}
``

License

MIT © harunurhan