By Douwe den Blanken (v0xnihili)

To see this package in action, a demo is available here. It is possible to type an equation and see the output in LaTeX underneath the editor in pink.

When embedding the EquationEditor component into your project, you have four properties you have to set. value and onChange speak for themselves, while autoCommands contains a list of commands for which you only have to type the name of the command with a \ in front of it. The same goes for the autoOperatorNames but then for operators.

import React, { useState } from "react";

import EquationEditor from "equation-editor-react";

const Example = () => {
  const [equation, setEquation] = useState("y=x");

  console.log(equation);

  return (
    <EquationEditor
      value={equation}
      onChange={setEquation}
      autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
      autoOperatorNames="sin cos tan"
    />
  )
};

export default Example;

MIT