react-tex

Display TeX-based math with React and KaTeX. ---

Installation

react-tex is available as an NPM package: ```sh $ 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: ```html ```

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: ```js 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: ```js 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 |