Nine Point Mulligan

# npm

Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

## @matejmazur/react-katex

3.0.2 • Public • Published

# react-katex

Display math expressions with KaTeX and React.

(based on the https://github.com/talyssonoc/react-katex)

Comparison with react-katex: https://github.com/talyssonoc/react-katex/issues/49.

## Usage

### Inline math

Display math in the middle of the text.

It will be rendered like this:

### Block math

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

It will be rendered like this:

Note:
Don't forget to import KaTeX CSS file.

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

This will be rendered like so:

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

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

### Escaping expressions

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

Or Multiline

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

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

You can even do variable substitution

### Configuring KaTeX

You can change directly all KaTeX options via props.settings:

Example of adding a custom macro:

Result:

## Keywords

### Install

npm i @matejmazur/react-katex`

1,316

3.0.2

MIT

22 kB

14

### Homepage

github.com/MatejMazur/react-katex

### Repository

github.com/MatejMazur/react-katex