# react-latex-next

> Render LaTeX in React apps

Latest version **3.0.0** (published 2024-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-latex-next
pnpm add react-latex-next
yarn add react-latex-next
bun add react-latex-next
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2024-04-24 |
| First published | 2018-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 114 |
| Author | harunurhan |
| Maintainers | harunurhan |
| Keywords | react, katex, latex, math |

## Links

- npm: https://www.npmjs.com/package/react-latex-next
- Repository: https://github.com/harunurhan/react-latex-next
- Homepage: https://react-latex.netlify.app/
- npm.io page: https://npm.io/package/react-latex-next

## Dependencies (1)

- [katex](https://npm.io/package/katex.md) ^0.16.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2024-04-24
- 2.3.0 — 2024-03-09
- 2.2.0 — 2022-08-26
- 2.1.0 — 2021-07-24
- 2.0.0 — 2021-04-11
- 1.5.0 — 2021-03-29
- 1.4.0 — 2021-03-28
- 1.2.0 — 2020-03-05
- 1.1.0 — 2018-08-06
- 1.0.0 — 2018-08-06

## README

# react-latex-next

> Render LaTeX beautifully in React apps!

[![NPM](https://img.shields.io/npm/v/react-latex-next.svg)](https://www.npmjs.com/package/react-latex-next) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

It renders all fragments of LaTeX (between delimiters) in a given text, similar to [KaTeX's auto-render](https://katex.org/docs/autorender.html).

See [the demo](https://react-latex.netlify.app).

## 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 (
    <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

```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 },
]
```

### 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.

```jsx
<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](https://katex.org/docs/api.html#persistent-macros) for more details (and security implications)

```jsx
<Latex macros={{ "\\f": "#1f(#2)" }}>{'$\\f\\relax{x} = x$ is rendered using macros'}</Latex>
```

## License

MIT © [harunurhan](https://github.com/harunurhan)

---
_Source: https://npm.io/package/react-latex-next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._