Display math in TeX with KaTeX and ReactJS,forked from https://github.com/jiang-jackson/react-katex-yingqi
npm install react-katex-yingqish
$ npm install react-katex-yingqi
# or
$ yarn add react-katex-yingqi
`
Usage
`jsx
import 'katex/dist/katex.min.css';
import { InlineMath, BlockMath } from 'react-katex-yingqi';
`
$3
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
$3
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
Note:
Don't forget to import KaTeX CSS file.
`jsx
import 'katex/dist/katex.min.css';
`
$3
#### 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(
math={'\\int_0^\\infty x^2 dx \\inta'}
errorColor={'#cc0000'}
/>, document.getElementById('math'));
`
This will be rendered like so:
!KaTeX error
#### 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(
math="\\int_{"
renderError={(error) => {
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
$3
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}}
},
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'));
``