@yozora/react-mathjax NPM

Rendering formula with mathjax in react. Inspired by react-mathjax and react-mathjax2.

The default version is mathjax@2.7.4.

Install

npm

npm install --save @yozora/react-mathjax

yarn
```
yarn add @yozora/react-mathjax
```

Usage

Basic:

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 = (
  <MathJaxProvider>
    <MathJaxNode inline={false} formula={code} />
  </MathJaxProvider>
)

Props

IMathJaxProviderProps

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

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
}