Synonym's React Mathquill


Overview

This is a fork of the react-mathquill project, which wraps MathQuill in React components.

We've made some updates to the underlying MathQuill library to add new features, remove the dependency on jQuery, and reduce bundle size.

Getting Started

- Run npm install
- Build with npm run build and make sure there are no errors
- You can run the examples with npm run start:example and navigate to http://localhost:8080/. Make sure that the editable math field works!
- If you make a change to our fork of MathQuill, run the ./mathquill-build.sh script to bring in those changes.
- IMPORTANT! Make sure you delete the font-face imports in the CSS file mathquill-basic.css! This causes some weird runtime error to occur due to a missing Node.js builtin function. Eventually we'll remove that manual step.
- Bump the version in package.json if you made changes
- Deploy the package to npm with npm publish

Examples

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

$3

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

// inserts the required css to the 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 (



)
}
`

$3

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

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

const StaticMathExample = () => (
{'\\frac{1}{\\sqrt{2}}\\cdot 2'}
)
`

Documentation

addStyles (function)

This function, when called, will append a