Using MathLive with React

To use a mathfield with React, import the MathLive library and use a <math-field> tag.

import "./App.css";
import "//unpkg.com/mathlive";
import { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  return (
    <div className="App">
      <math-field 
        onInput={evt => setValue(evt.target.value)}
      >
        {value}
      </math-field>
      <p>Value: {value}</p>
    </div>
  );
}

export default App;

Using MathLive with React and TypeScript

To use a mathfield with React and TypeScript, you need to add TypeScript definitions for MathLive.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'math-field': React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement>;
    }
  }
}


import "./App.css";
import "//unpkg.com/mathlive";
import { useState } from "react";

function App() {
  const [value, setValue] = useState<string>("");

  return (
    <div className="App">
      <math-field 
        onInput={
          (evt: React.ChangeEvent<HTMLElement>) => 
            setValue(evt.target.value)
        }
      >
        {value}
      </math-field>
      <p>Value: {value}</p>
    </div>
  );
}

export default App;

Using LaTeX strings with JSX

You can specify the initial value of the mathfield by providing a LaTeX string as a child of the <math-field> tag.

However, since both JSX and LaTeX use curly braces, you need to escape the LaTeX braces. The easiest way to do this is to use a backtick string. The content of the backtick string will be interpreted as a JavaScript string, which means that the backslashes will need to be escaped as well.

<math-field>{`
  \\frac{1}{2}
`}</math-field>

Theory of Operations

A MathLive mathfield behaves as a regular DOM element:

• define mathfields using the <math-field> tag in JSX
• get a reference to the corresponding DOM element with the useRef() hook
• customize the mathfield on mount with useEffect(..., []) hook

Customization

To customize a mathfield, use a useEffect hook. The last parameter is set to empty brackets to indicate the hook should only be run once when the component is mounted.

To access the mathfield DOM element use a useRef() hook. With the current property of the ref, you can access and manipulate all the properties and methods that are specific to the mathfield (value, selection, insert(), etc…). See MathfieldElement.

import "./App.css";
import "//unpkg.com/mathlive";
import { useState, useEffect, useRef } from "react";

function App() {
  // Get a ref to the mathfield element 
  // (see `ref={mf}` in the markup below)
  const mf = useRef();

  // Customize the mathfield when it is created
  useEffect(() => {
    mf.current.mathVirtualKeyboardPolicy = "manual";
    mf.current.addEventListener("focusin", (evt) => 
      window.mathVirtualKeyboard.show()
    );
    mf.current.addEventListener("focusout", (evt) => 
      window.mathVirtualKeyboard.hide()
    );
  }, []);


  const [value, setValue] = useState("");

  return (
    <div className="App">
      <math-field 
        ref={mf} 
        onInput={evt => setValue(evt.target.value)}
      >
        {value}
      </math-field>
      <p>Value: {value}</p>
    </div>
  );
}

export default App;