# react-katex

> Display math in TeX with KaTeX and ReactJS

Latest version **3.1.0** (published 2025-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-katex
pnpm add react-katex
yarn add react-katex
bun add react-katex
```

## Health

**Score 33/100 (F)** — status: maintenance-mode.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2025-05-09 |
| First published | 2015-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-katex) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 441 |
| Author | Talysson |
| Maintainers | talyssonoc |
| Keywords | react, tex, latex, math, katex |

## Links

- npm: https://www.npmjs.com/package/react-katex
- Repository: https://github.com/talyssonoc/react-katex
- Issues: https://github.com/talyssonoc/react-katex/issues
- npm.io page: https://npm.io/package/react-katex

## 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.1.0 (latest) — 2025-05-09
- 3.0.1 — 2022-08-10
- 3.0.0 — 2022-08-10
- 2.0.2 — 2018-04-10
- 2.0.1 — 2018-03-21
- 2.0.0 — 2018-03-21
- 1.2.0 — 2017-06-19
- 1.1.0 — 2017-02-13
- 1.0.1 — 2016-10-13
- 1.0.0 — 2016-10-13
- 0.0.3 — 2015-05-06
- 0.0.2 — 2015-05-05
- 0.0.1 — 2015-05-05

## README

# react-katex

[![Build Status](https://travis-ci.org/talyssonoc/react-katex.svg?branch=master)](https://travis-ci.org/talyssonoc/react-katex) [![Code Climate](https://codeclimate.com/github/talyssonoc/react-katex/badges/gpa.svg)](https://codeclimate.com/github/talyssonoc/react-katex) [![Coverage Status](https://coveralls.io/repos/github/talyssonoc/react-katex/badge.svg?branch=master)](https://coveralls.io/github/talyssonoc/react-katex?branch=master)

> Display math expressions with [KaTeX](https://khan.github.io/KaTeX/) and React

## Installation

```sh
  $ npm install react-katex
  # or
  $ yarn add react-katex
```

## Usage

```jsx
import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex';
```

### InlineMath

Display math in the middle of the text.

```jsx
  var InlineMath = ReactKaTeX.InlineMath;

  ReactDOM.render(<InlineMath math="\\int_0^\\infty x^2 dx"/>,
                document.getElementById('math'));

  // or

  ReactDOM.render(<InlineMath>\int_0^\infty x^2 dx</InlineMath>,
                document.getElementById('math'));
```

It will be rendered like this:

![Inline math](docs/inline.png)

### BlockMath

Display math in a separated block, with larger font and symbols.

```jsx
  var BlockMath = ReactKaTeX.BlockMath;

  ReactDOM.render(<BlockMath math="\\int_0^\\infty x^2 dx"/>,
                document.getElementById('math'));

  // or

  ReactDOM.render(<BlockMath>\int_0^\infty x^2 dx</BlockMath>,
                document.getElementById('math'));
```

It will be rendered like this:

![Block math](docs/block.png)


**Note:**<br>
Don't forget to import KaTeX CSS file.
```jsx
import 'katex/dist/katex.min.css';
```

### Error handling

#### Default error message

By default the error rendering is handled by KaTeX. You can optionally pass `errorColor` (defaults to `#cc0000`) as a prop:

```jsx
var BlockMath = ReactKaTeX.BlockMath;

ReactDOM.render(
  <BlockMath
    math={'\\int_0^\\infty x^2 dx \\inta'}
    errorColor={'#cc0000'}
  />, document.getElementById('math'));
```

This will be rendered like so:

![KaTeX error](docs/error.png)

#### Custom error message

It's possible to handle parse errors using the prop `renderError`. This prop must be a function that receives the error object and returns what should be rendered when parsing fails:

```jsx
var BlockMath = ReactKaTeX.BlockMath;
  
ReactDOM.render(
  <BlockMath
    math="\\int_{"
    renderError={(error) => {
      return <b>Fail: {error.name}</b>
    }}
  />,
  document.getElementById('math'));

// The code above will render '<b>Fail: ParseError</b>' because it's the value returned from `renderError`.
```

This will render `<b>Fail: ParseError</b>`:

![renderError](docs/rendererror.png)

### Escaping expressions

In addition to using the `math` property, you can also quote as a child allowing the use of `{ }` in your expression.

```jsx
ReactDOM.render(<BlockMath>{"\\frac{\\text{m}}{\\text{s}^2}"}</BlockMath>,
                document.getElementById('math'));
```

Or Multiline

```jsx
ReactDOM.render(<BlockMath>{`\\frac{\\text{m}}
{\\text{s}^2}`}</BlockMath>,
                document.getElementById('math'));
```

However, it can be annoying to escape backslashes. This can be circumvented with the `String.raw` tag on a template literal when using ES6.

```jsx
ReactDOM.render(<BlockMath>{String.raw`\frac{\text{m}}{\text{s}^2}`}</BlockMath>,
                document.getElementById('math'));
```

Backticks must be escaped with a backslash but would be passed to KaTeX as \\\`. A tag can be created to replace \\\` with \`

```jsx
const latex = (...a) => String.raw(...a).replace("\\`","`")
ReactDOM.render(<BlockMath>{latex`\``}</BlockMath>,
                document.getElementById('math'));
```

You can even do variable substitution

```jsx
const top = "m";
const bottom = "s";
ReactDOM.render(<BlockMath>{String.raw`\frac{\text{${top}}}{\text{${bottom}}^2}`}</BlockMath>,
                document.getElementById('math'));
```

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