Setup

npm install --s react-maths

import React from 'react';
import { MathsEnabler, MathsInput, MathsKeypad } from 'react-maths'

function App() {
  return (
    <MathsEnabler>
      <MathsInput />
      <MathsKeypad>
        <MathsKeypad.Row>
          <MathsKeypad.Key latex='7' cmd='7' />
          <MathsKeypad.Key latex='8' cmd='8' />
          <MathsKeypad.Key latex='$+$' cmd='+' />
          <MathsKeypad.Key latex='$\times$' cmd='\times' />
        </MathsKeypad.Row>
      </MathsKeypad>
    </MathsEnabler>
  )
}

Components

MathsEnabler

A <MathsEnabler /> is a top-level component that:

• Makes react-maths's hooks available to nested components; and
• Thereby allows a nested MathsKeypad to provide a nested [MathsInput] with input.

Props

|Name|Type|Description| |---|---|---| |children*|node|Primary content|

*Optional

MathsInput

|Name|Type|Description| |---|---|---| |ref|React.MutableRefObject|A React ref| |id|string|| |onBlur|function|Callback function| |onClick|function|Callback function| |onFocus|function|Callback function| |style|Object|Inline style object|

*Optional

MathsKeypad

Props

|Name|Type|Description| |---|---|---| |children|node|MathsKeypad.Rows| |inputRef|React.MutableRefObject|The React ref attached to the MathsInput which the keypad should create input for| |style|Object|Inline style object| |when|boolean|Whether or not the MathsKeypad is showing|

*Optional

MathsKeypad.Row

Props

|Name|Type|Description| |---|---|---| |children|node|MathsKeypad.Keys| |style|Object|Inline style object| |weight*|number|Weight for the MathsKeypad.Row's height|

*Optional

MathsKeypad.Key

Props

|Name|Type|Description| |---|---|---| |component|function|Component to be rendered| |html|string|String to use as inner HTML| |latex|string|Dollar delimited LaTeX code| |commands|Object[]|KeyCommands to be processed| |cmd|string|Passed to MathQuill's cmd method for the current MathsInput| |keystroke|string|Passed to MathQuill's keystroke method for the current MathsInput| |write|string|Passed to MathQuill's write method for the current MathsInput| |style|Object|Inline style object| |weight*|number|Weight for the MathsKeypad.Key's width|

*Optional

KeyCommands

|Key|Value Type|Description| |---|---|---| |cmd|string|Passed to MathQuill's cmd method for the current MathsInput| |keystroke|string|Passed to MathQuill's keystroke method for the current MathsInput| |write*|string|Passed to MathQuill's write method for the current MathsInput|

*Optional

Hooks

useActiveHtmlElementState

useActiveMathField

useMathQuill

useMathQuillMathField

Helpers

isAMathQuillElement

parseWithKatex