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