react-tex

React component using Khan Academy's Katex library

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-tex
1171.5.02 years ago6 years agoMinified + gzip package size for react-tex in KB

Readme

NPM Build Status
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. tex 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 ($$). inlinetex 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 |