Awesome-react-calculator NPM

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