Display math expressions with KaTeX and React

Installation

$ npm install react-katex $ yarn add react-katex

Usage

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

InlineMath

Display math in the middle of the text.

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

It will be rendered like this:

BlockMath

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

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

It will be rendered like this:

Note:

Don't forget to import KaTeX CSS file.

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:

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:

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:

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

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.

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

Or Multiline

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.

ReactDOM . render ( < BlockMath > { String . raw ` \f rac{ \t ext{m}}{ \t ext{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 `

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

You can even do variable substitution