@johnpaul97/pocket-calculator

Simple calculator react component. Supports expressions using basic operations and paranthesis on big numbers. It is suitable for financial or mathemathical apps.

Install

npm install --save @johnpaul97/pocket-calculator

Usage

import React, { Component } from 'react'

import Calculator from '@johnpaul97/pocket-calculator'
import '@johnpaul97/pocket-calculator/dist/index.css'

class Example extends Component {
   state = {
    backgroundColor: '#7e7e7e',
    buttonColor: '#46403D',
    resultLabel: 'result',
    expressionLabel: 'expression'
  };

  render() {
    const {backgroundColor, buttonColor, resultLabel, expressionLabel} = this.state;

    return <Calculator 
              backgroundColor={backgroundColor} 
              buttonColor={buttonColor} 
              resultLabel={resultLabel} 
              expressionLabel={expressionLabel} 
             />
  }
}

Props

• backgroundColor - define calculator's color (hexadecimal value)
• buttonColor - define button's color (hexadecimal value)
• resultLabel - text for result input (string)
• expressionLabel - text for expression input (string)

Uncontrolable Props

• isPlayingAudio - binded to switch element on interface that allows background click sound to play when a button is clicked

Default props

• backgroundColor: '#7e7e7e',
• buttonColor: '#46403D',
• resultLabel: 'result',
• expressionLabel: 'expression'

License

MIT © JohnPaul97