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.

Installation

Use the npm or yarn to install

npm install -S awesome-react-calculator

yarn add awesome-react-calculator

Live Examples

Live Demo or Live Coding

Usage

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