@yozora/react-mathjax

render formula with mathjax in react

Usage no npm install needed!

<script type="module">
  import yozoraReactMathjax from 'https://cdn.skypack.dev/@yozora/react-mathjax';
</script>

README

@yozora/react-mathjax


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

  • MathJaxProviderProps

    interface MathJaxProviderProps {
  /**
  * 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?: MathJaxConfig
  /**
  * Mathjax options.
  */
  mathjaxOptions?: {
    /**
    * Delay between updates.
    * @default 0
    */
    processSectionDelay?: number
    /**
    * Type of the formula string.
    * @default 'tex'
    */
    language?: 'tex' | 'asciimath'
  }
  /**
  * Triggered on mathjax loaded.
  * @param MathJax
  */
  onLoad?(MathJax: MathJax): void
  /**
  * Triggered on mathjax thrown an error.
  *
  * @param MathJax
  * @param error
  */
  onError?(MathJax: MathJax, error: any): void
}

  • MathJaxNodeProps

    interface MathJaxNodeProps {
  /**
   * 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