React component using Khan Academy's Katex library

by React

react-tex

Display TeX-based math with React and KaTeX.

Installation

react-tex is available as an NPM package:

$ npm install --save react-tex

You can download KaTeX and host it on your server or include the katex.min.css file on your page directly from a CDN:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css" integrity="sha384-BTL0nVi8DnMrNdMQZG1Ww6yasK9ZGnUxL1ZWukXQ7fygA1py52yPp9W4wrR00VML" crossorigin="anonymous">

Usage

react-tex has two components you can use, <Tex> and <InlineTex>.

TeX

The <Tex> component allows you to display TeX-based math.

This expected output is produced by the following example:

import {Tex} from 'react-tex';

class TexWrapper extends Component{
  render(){
    let latexString = "\int_{a}^{b} f(x)dx = F(b) - F(a)";
    return(
      <div>
        <Tex texContent={latexString}/>
      </div>
    )
  }
}

You can use the following props with Tex:

Property Type Default Description
texContent string `` TeX string

Inline TeX

The <InlineTex> component allows you to display TeX-based math inline with text by wrapping a TeX string with double dollar signs ($$).

This expected output is produced by the following example:

import {InlineTex} from 'react-tex';

class InlineTexWrapper extends Component{
  render(){
    let latexString = "This is inline $$\int_{a}^{b} f(x)dx = F(b) - F(a)$$ latex string";
    return(
      <div>
        <InlineTex texContent={latexString}/>
      </div>
    )
  }
}

You can use the following props with InlineTex:

Property Type Default Description
texContent string `` TeX string
texSeperator string ${2} Regex string to seperate TeX from text

GitHub