Rendering formula with [mathjax][] in react. Inspired by [react-mathjax][] and [react-mathjax2][].
The default version is
[mathjax@2.7.4](https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_SVG).
## Install
- npm
```bash
npm install --save @yozora/react-mathjax
```
- yarn
```bash
yarn add @yozora/react-mathjax
```
## Usage
- Basic:
```tsx
import React from 'react'
import { MathJaxProvider, MathJaxNode } from '@yozora/react-mathjax'
const code = `
\\begin{align}
f(x) = \\left\\lbrace
\\begin{aligned}
&x^2, &x < 0 \\\\
&\\frac{1}{x^3}, &x > 0
\\end{aligned}
\\right.
\\end{align}
`
const wrapper = (
)
```
### Props
- `IMathJaxProviderProps`
```typescript
export interface IMathJaxProviderProps {
/**
* Sub components.
*/
children?: React.ReactNode
/**
* Contents / Animation displayed at waiting MathJax loading.
* @default null
*/
loading?: React.ReactNode
/**
* http / https url for loading mathjax.
* @default 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
*/
mathjaxSrc?: string
/**
* MathJax config
*/
mathjaxConfig?: IMathJaxConfig
/**
* MathJax options.
*/
mathjaxOptions?: {
/**
* Delay between updates.
* @default 0
*/
processSectionDelay?: number
/**
* Type of the formula string.
* @default 'tex'
*/
language?: MathJaxLanguage
}
/**
* Triggered on mathjax loaded.
* @param MathJax
*/
onLoad?(MathJax: IMathJax): void
/**
* Triggered on mathjax thrown an error.
*
* @param MathJax
* @param error
*/
onError?(MathJax: IMathJax, error: any): void
}
```
- `IMathJaxNodeProps`
```typescript
export interface IMathJaxNodeProps {
/**
* The literal formula string.
*/
formula: string
/**
* Whether to render the formulas in inline mode.
* @default false
*/
inline?: boolean
/**
* CSS class name.
*/
className?: string
/**
* CSS style properties
*/
style?: React.CSSProperties
/**
* On mathjax rendering.
*/
onRender?(): void
}
```
## Related
- [react-mathjax][]
- [mathjax][]
[react-mathjax]: https://github.com/SamyPesse/react-mathjax
[react-mathjax2]: https://github.com/wko27/react-mathjax
[mathjax]: https://www.mathjaxjax.org/
