@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

• 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
  }

Related

• react-mathjax
• mathjax