# react-mathquill2

> React component wrapper for Mathquill with typescript declare

Latest version **0.1.4** (published 2019-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-mathquill2
pnpm add react-mathquill2
yarn add react-mathquill2
bun add react-mathquill2
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-11-14 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 449.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | moltak |
| Maintainers | moltak |

## Links

- npm: https://www.npmjs.com/package/react-mathquill2
- Repository: https://github.com/moltak/react-mathquill2
- Homepage: https://github.com/moltak/react-mathquill2#readme
- Issues: https://github.com/moltak/react-mathquill2/issues
- npm.io page: https://npm.io/package/react-mathquill2

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.9.0
- [jquery](https://npm.io/package/jquery.md) ^3.4.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [@edtr-io/mathquill](https://npm.io/package/@edtr-io/mathquill.md) ^0.11.0

## Recent versions

- 0.1.4 (latest) — 2019-11-14
- 0.1.3 — 2019-11-14
- 0.1.2 — 2019-11-14
- 0.1.1 — 2019-11-14
- 0.1.0 — 2019-11-14

## README

# React component wrapper for [Mathquill](http://mathquill.com/)

The original version of library is here! [viktorstrate/react-mathquill](https://github.com/viktorstrate/react-mathquill)

[![npm version](https://badge.fury.io/js/react-mathquill.svg)](https://badge.fury.io/js/react-mathquill2.svg)

## Example

> Link to an [example](https://viktorstrate.github.io/react-mathquill/)

```javascript
/**
 * Editable component
 */
import React from 'react'
import EditableMathQuill, { addStyles as addMathquillStyles } from 'react-mathquill'

// inserts the required css to the <head> block.
// You can skip this, if you want to do that by your self.
addMathquillStyles()

export default class App extends React.Component {
  constructor() {
    this.state = {
      latex: '\\frac{1}{\\sqrt{2}}\\cdot 2',
    }
  }

  render() {
    return (
      <EditableMathQuill
        latex={this.state.latex} // Initial latex value for the input field
        onChange={mathField => {
          // Called everytime the input changes
          this.setState({ mathField.latex() })
        }}
      />
    )
  }
}
```

```javascript
/**
 * Static component
 */
import React from 'react'
import StaticMathQuill, {
  addStyles as addMathquillStyles,
} from 'react-mathquill'

addMathquillStyles()

export default class App extends React.Component {
  constructor() {
    this.state = {
      latex: '\\frac{1}{\\sqrt{2}}\\cdot 2',
    }
  }

  render() {
    return (
      <StaticMathQuill
        latex={this.state.latex} // Initial latex value for the input field
      />
    )
  }
}
```

# Documentation

## MathQuillComponent (React Element)

### 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 element, this can be useful for custom _classNames_ or _styles_

## 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](http://docs.mathquill.com/en/latest/Getting_Started/)

---
_Source: https://npm.io/package/react-mathquill2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._