Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/viktorstrate/react-mathquill
React component wrapper for Mathquill
https://github.com/viktorstrate/react-mathquill
hacktoberfest latex math mathquill react react-component react-wrapper
Last synced: 4 days ago
JSON representation
React component wrapper for Mathquill
- Host: GitHub
- URL: https://github.com/viktorstrate/react-mathquill
- Owner: viktorstrate
- License: mit
- Created: 2018-10-17T18:54:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-05T01:25:21.000Z (over 1 year ago)
- Last Synced: 2024-12-31T20:11:39.676Z (11 days ago)
- Topics: hacktoberfest, latex, math, mathquill, react, react-component, react-wrapper
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-mathquill
- Size: 2.49 MB
- Stars: 55
- Watchers: 3
- Forks: 38
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React component wrapper for [Mathquill](http://mathquill.com/)
[](https://badge.fury.io/js/react-mathquill)
## Examples
- [Build of examples](https://viktorstrate.github.io/react-mathquill/) located at `src/examples/`
- Play with the examples below at this [Code Sandbox](https://codesandbox.io/s/sweet-liskov-8mlzu)
### Editable Math Field
```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 (
{
setLatex(mathField.latex())
}}
/>
{latex}
)
}
```
### Static Math Field
```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 `` 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](http://docs.mathquill.com/en/latest/Getting_Started/)
## EditableMathField (React Element)
> Wrapper for [Mathquill MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
### Props
- latex: String - _Initial latex value for the input field_
- config: Object - _A mathquill [config](http://docs.mathquill.com/en/latest/Config/) object_
- onChange([mathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)) - _A function that is called on change events._
- mathquillDidMount([mathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)) - _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_
## StaticMathField (React Element)
> Wrapper for [Mathquill StaticField](http://docs.mathquill.com/en/latest/Api_Methods/#mqstaticmathhtml_element)
### Props
- children: String - _A string of latex to render statically on the page_
Other props will be passed to the wrapping span element, this can be useful for custom _classNames_ or _styles_