react-katex

    2.0.2 • Public • Published

    react-katex

    Build Status Code Climate Coverage Status

    Display math expressions with KaTeX and React

    Installation

      $ npm install react-katex
      # or 
      $ 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'));
     
      // or
     
      ReactDOM.render(<InlineMath>\int_0^\infty x^2 dx</InlineMath>,
                    document.getElementById('math'));

    It will be rendered like this:

    Inline math

    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'));
     
      // or
     
      ReactDOM.render(<BlockMath>\int_0^\infty x^2 dx</BlockMath>,
                    document.getElementById('math'));

    It will be rendered like this:

    Block math

    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:

    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:

    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`.

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

    renderError

    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`\frac{\text{m}}{\text{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

    const top = "m";
    const bottom = "s";
    ReactDOM.render(<BlockMath>{String.raw`\frac{\text{${top}}}{\text{${bottom}}^2}`}</BlockMath>,
                    document.getElementById('math'));

    Install

    npm i react-katex

    DownloadsWeekly Downloads

    3,389

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    36

    Last publish

    Collaborators

    • talyssonoc