react-tex

1.5.0 • Public • Published

NPM Build Status

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

Readme

Keywords

Package Sidebar

Install

npm i react-tex

Weekly Downloads

83

Version

1.5.0

License

MIT

Unpacked Size

11.3 kB

Total Files

10

Last publish

Collaborators

  • _dhruv