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/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" 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 |