# 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(, document.getElementById('math')); // or ReactDOM.render(\int_0^\infty x^2 dx, 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(, document.getElementById('math')); // or ReactDOM.render(\int_0^\infty x^2 dx, document.getElementById('math')); ``` It will be rendered like this: ![Block math](docs/block.png) **Note:**
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( , 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( { return Fail: {error.name} }} />, document.getElementById('math')); // The code above will render 'Fail: ParseError' because it's the value returned from `renderError`. ``` This will render `Fail: ParseError`: ![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({"\\frac{\\text{m}}{\\text{s}^2}"}, document.getElementById('math')); ``` Or Multiline ```jsx ReactDOM.render({`\\frac{\\text{m}} {\\text{s}^2}`}, 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({String.raw`\frac{\text{m}}{\text{s}^2}`}, 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({latex`\``}, document.getElementById('math')); ``` You can even do variable substitution ```jsx const top = "m"; const bottom = "s"; ReactDOM.render({String.raw`\frac{\text{${top}}}{\text{${bottom}}^2}`}, document.getElementById('math')); ```

	Stars	Issues	Version	Updated	Created	Size
latex	26	10	0.0.1	10 years ago	10 years ago	$Minified + gzip package size for latex in KB$
react-katex	398	13	3.0.1	8 months ago	8 years ago
react-latex	163	20	2.0.0	3 years ago	8 years ago	$Minified + gzip package size for react-latex in KB$

latex vs react-katex vs react-latex

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past