React-maths NPM

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.Row`s
`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.Key`s
`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`