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 try it live here : Live Demo, or you can test it in CodeSandbox : js version or ts version.
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 :
| Prop : Type | Default | Description |
|---|---|---|
id: KeyId | string |
none | Must be different than all other ids |
label: string | ReactNode |
none | What's displayed on the keyboard |
labelType: "raw" | "tex" | "svg" |
none | Type of the label |
mathfieldInstructions?: MathfieldInstructions |
undefined |
An objet { method , content }, with content being anything you like and method is one of the MathQuill Api methods. |
onClick?: () => void |
undefined |
To provide custom logic to the key |
fullWidth?: boolean |
true |
shorthand for width='100%' |
isUtilityKey?: boolean |
false |
Utility keys have a different background |
Example :
<MathInput
numericToolbarKeys={[
"cos",
"sin",
"tan",
{
id: "custom",
label: "custom",
labelType: "raw",
mathfieldInstructions: {
method: "write",
content: "custom content",
},
},
]}
/>All the MathInput Props
| Prop: Type | Default value | Description |
|---|---|---|
numericToolbarKeys?: (KeyId | KeyProps)[] |
undefined |
|
numericToolbarTabs?: ToolbarTabIds[] |
undefined |
Choose the options you want in the select menu of the toolbar. Choices available are "trigo" | "greek" | "sets" | "sequences" | "functions" | "polynomial" |
alphabeticToolbarKeys?: (KeyId | KeyProps)[] |
undefined |
Same thing that numericToolbarKeys but for the alphabetic keyboard |
setMathfieldRef?: (mf: MathField) => void |
undefined |
Retrieve the ref to the MathQuill input in order to use the MathQuill Api |
setClearRef?: (f: () => void) => void |
undefined |
Pass it a ref in order to have a shorthand for clearing the input. e.g : setClearRef( f => myRef.current = f) then myRef.current() somewhere in your App |
initialLatex?: string |
undefined |
This latex will be shown in the input at the initial render. Later changes on this prop won't affect the input. You should interact with the MathField ref directly if you want to do stuff with the input. |
setValue?: (s: string) => void |
undefined |
To retrieve the latex |
divisionFormat?: "fraction" | "obelus" |
"fraction" |
Whether to show divisions as fractions or with the division symbol ÷ |
style?: React.CSSProperties |
{} |
CSS for the input |
size?: "small" | "medium" |
"medium" |
Shorthand to change the padding of the input |
rootElementId?: string |
undefined |
By default, the keyboard applies a padding bottom on the <body> in order to not overflow the input. You can use this prop to set this padding on another element than the body. For example, you can target Nextjs' root element by doing rootElementId = "__next". |
fullWidth?: boolean |
true |
Shorthand for width="100%" |
Contributing
Don't hesitate to give feedback, and any contribution is welcomed !