react-mathquill's Introduction

React component wrapper for Mathquill

Examples

Build of examples located at src/examples/
Play with the examples below at this Code Sandbox

Editable Math Field

import React, { useState } from 'react'
import { addStyles, EditableMathField } from 'react-mathquill'

// inserts the required css to the <head> block.
// you can skip this, if you want to do that by yourself.
addStyles()

const EditableMathExample = () => {
  const [latex, setLatex] = useState('\\frac{1}{\\sqrt{2}}\\cdot 2')

  return (
    <div>
      <EditableMathField
        latex={latex}
        onChange={(mathField) => {
          setLatex(mathField.latex())
        }}
      />
      <p>{latex}</p>
    </div>
  )
}

Static Math Field

import React from 'react'
import { addStyles, StaticMathField } from 'react-mathquill'

// inserts the required css to the <head> block.
// you can skip this, if you want to do that by yourself.
addStyles()

const StaticMathExample = () => (
  <StaticMathField>{'\\frac{1}{\\sqrt{2}}\\cdot 2'}</StaticMathField>
)

Documentation

addStyles (function)

This function, when called, will append a <style id="react-mathquill-styles"> tag to the <head> of the document. The style tag includes all the required styles for Mathquill to work.

This function is not necessary, provided you include the styles in another way. See Mathquill Docs - Download and Load

EditableMathField (React Element)

Wrapper for Mathquill MathField

Props

latex: String - Initial latex value for the input field
config: Object - A mathquill config object
onChange(mathField) - A function that is called on change events.
mathquillDidMount(mathField) - A function that is called when the Mathquill element is initalized.

Other props will be passed to the wrapping span element, this can be useful for custom classNames or styles