Blog

About

React-Tex

NPM Build Status

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.12.0/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.

tex

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 ($$).

inlinetex

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
© 2021