# awesome-react-calculator

> awesome-react-calculator

Latest version **1.1.0** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install awesome-react-calculator
pnpm add awesome-react-calculator
yarn add awesome-react-calculator
bun add awesome-react-calculator
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-09-24 |
| First published | 2019-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 10 |
| Author | avinash sivaraman |
| Maintainers | avinashsivaraman |
| Keywords | react-component, calculator, react |

## Links

- npm: https://www.npmjs.com/package/awesome-react-calculator
- Repository: https://github.com/avinashsivaraman/awesome-react-calculator
- Issues: https://github.com/avinashsivaraman/awesome-react-calculator/issues
- npm.io page: https://npm.io/package/awesome-react-calculator

## Dependencies (1)

- [mathjs](https://npm.io/package/mathjs.md) 6.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2021-09-24
- 1.0.9 — 2019-06-21
- 1.0.8 — 2019-06-21
- 1.0.7 — 2019-06-21
- 1.0.6 — 2019-06-21
- 1.0.5 — 2019-06-20
- 1.0.4 — 2019-06-20
- 1.0.3 — 2019-06-20
- 1.0.2 — 2019-06-20
- 1.0.1 — 2019-06-20
- 1.0.0 — 2019-06-20

## README

# Awesome React Calculator

Awesome React Calculator is a React Component library. It gives you a simple calculator component to work in your project. It supports keyboard and you can paste your expression to get the result.


[![npm version](https://img.shields.io/badge/npm-1.0.9-blue.svg)](https://www.npmjs.com/package/awesome-react-calculator)

## Installation

Use the npm or yarn to install

```bash
npm install -S awesome-react-calculator
```
```bash
yarn add awesome-react-calculator
```

## Live Examples

[Live Demo](https://csb-ncxvw.netlify.com/) or [Live Coding](https://codesandbox.io/embed/loving-bird-ncxvw)


## Usage

```javascript

import React, {Component} from 'react'
import {render} from 'react-dom'
import Calculator from "awesome-react-calculator";

const style = {
  height: '24rem',
  width: '15rem'
}

class Demo extends Component {
  handleInput(input) {
    console.log(`${input.expression} is shown in the calculator, User clicked the ${input.key}`)
  }

  onResultChange(newResult) {
    console.log(newResult)
    console.log(`${newResult.expression} is validated as ${newResult.result} `)
  }
  render() {
    return <div className='calculator-demo' style={style}>
      <h1>Calculator</h1>
      <Calculator
        onNewInput={this.handleInput}
        onResultChange={this.onResultChange}/>
    </div>
  }
}

render(<Demo/>, document.querySelector('#demo'))
```
## Options

### Props
| Props  | Return Type   | Usage |
|---|---|--- |
| onNewInput  | object {expression: string, key: string} | Triggered when some input is entered|
| onResultChange  | object {expression: string, result: string}  | Returns the result shown in calculator and triggered whenever the result is changed|


### Note

Please set the **width and height** of the parent div of our the `<Calculator />` Component


## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)

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