react-math-keyboard v1.5.16

react-math-keyboard

This library provides :

• a MathQuill input in which you can write both mathematical expressions (in LaTeX) and raw text
• a customizable, pretty, mobile-friendly keyboard for this input.

You can test it in CodeSandbox : js version or ts version.

:warning: This is using a fork of MathQuill in order to use the comma as a decimal separator and the symbol $\times$ instead of $\cdot$ for multiplication. This is not customizable so far, but could be in the future if there are requests for it.

This library is used by Mathlive.fr.

Basic usage

Install the package :

npm i react-math-keyboard

Then import the MathInput :

import MathInput from "react-math-keyboard";

You can then use it with no configuration :

<MathInput />

Getting the value of the input as a LaTeX string :

const [latex, setLatex] = useState("")
//...later
<MathInput setValue={setLatex} />

If you need to do more specific stuff with the input, you should retrieve the ref to the MathField, and then the whole MathQuill API is available to use.

const mf = useRef<MathField>();
const onClick=()=> mf.current.latex("click!");

//...later
<MathInput setMathfieldRef={(mathfield)=>mf.current=mathfield} />
<button onClick={onClick}>Click me</button>

Customizing the keyboard

You can hide the toolbar if you don't need additional keys :

<MathInput numericToolbarKeys={[]} />

Or you can provide an array of KeyIds or KeyProps if you only want certain keys. Here is the format for KeyProps :

Example :

<MathInput
  numericToolbarKeys={[
    "cos",
    "sin",
    "tan",
    {
      id: "custom",
      label: "custom label",
      labelType: "raw",
      mathfieldInstructions: {
        method: "write",
        content: "custom content",
      },
    },
  ]}
/>

All the MathInput Props

Contributing

Don't hesitate to give feedback, and any contribution is welcomed !