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.

⚠️ 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.

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>

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",
      },
    },
  ]}
/>

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