Skip to content

Latest commit

 

History

History
78 lines (54 loc) · 2.02 KB

README.md

File metadata and controls

78 lines (54 loc) · 2.02 KB

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

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