Display math with KaTeX and ReactJS!
You can install it with npm:
$ npm install --save react-katex
With Yarn:
$ yarn add react-katex
Or use one of the files inside the dist
folder.
When using react-katex directly from the browser, react-katex will export a global called ReactKaTeX. Notice that the T and X from "KaTeX" are uppercased.
Don't forget to import KaTeX CSS file (see example/index.html
).
If you open the example file on Firefox directly (i.e. without a server) the fonts won't load, open it on Chrome or put it on some server. You can use some static one-liner.
react-katex
has two types of math components, InlineMath
and BlockMath
.
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'));
// or
ReactDOM.render(<InlineMath>\int_0^\infty x^2 dx</InlineMath>,
document.getElementById('math'));
It will be rendered like this:
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'));
// or
ReactDOM.render(<BlockMath>\int_0^\infty x^2 dx</BlockMath>,
document.getElementById('math'));
It will be rendered like this:
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'));
// The code above will render '<b>Fail: ParseError</b>' because it's the value returned from `renderError`.