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;
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;