@yozora/react-math

This component is for rendering the Math data produced by @yozora/tokenizer-math.
This component has been built into @yozora/react-markdown, you can use it directly.

Install

• npm

  npm install --save @yozora/react-math

• yarn

  yarn add @yozora/react-math

Usage

To use this component alone, You need to place it under the component MathJaxProvider (exported from @yozora/react-mathjax).

• Use it alone:

  import React from 'react'
  import Math from '@yozora/react-math'
  import { MathJaxProvider } from '@yozora/react-mathjax'
  import '@yozora/react-math/lib/esm/index.css'
  
  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>
      <Math
        value={ code }
        style={{ color: 'orange', fontSize: '16px' }}
      />
    </MathJaxProvider>
  )

• @yozora/react-markdown has has built-in MathJaxProvider, so you don’t need to wrap it manually.

Props

Name	Type	Required	Default	Description
className	string	false	-	Root css class
style	React.CSSProperties	false	-	Root css style
value	string	true	-	Mathjax codes

• className: The root element of this component will always bind with the CSS class 'yozora-math'.

Related

• @yozora/ast
• @yozora/react-inline-math
• @yozora/react-markdown
• @yozora/tokenizer-inline-math
• @yozora/react-mathjax
• @yozora/tokenizer-math
• mathjax