react-mathlive

A react component using mathlive.js's mathfield (interactive math editor).

How to install

You can install react-mathlive like any other Javascript or Typescript library via npm:

npm i react-mathlive

For Typescript users: As react-mathlive is written in Typescript, it comes with its own typings.

How to use

This text assumes you know how to build simple react components.

You can use the MathFieldComponent in your web application as follows:

render() {
  return <MathFieldComponent
    latex="f(x)=\\log _10 x"
    onChange={this.onMathChange}
  />;
}

onMathChange(mathText) {
  console.log(mathText);
}

There is also an example Typescript react application using this library.

Interacting with the native library

The MathFieldComponent also allows retrieving the native MathField object from the Mathlive library via the mathFieldRef parameter:

render() {
  return <MathFieldComponent
    mathFieldRef={mf => (this.internalMathField = mf)}
  />;
}

Via the optional mathFieldConfig parameter it is possible to provide the native MathField with a MathFieldConfig on its creation:

render() {
  return <MathFieldComponent
    mathFieldConfig={{
      defaultMode: "text"
      virtualKeyboardMode: "onfocus"
    }}
  />;
}

Contribute

This is an open source library and issues and pull requests are very welcome.

See Contributing.