calc-run v0.0.1
Calculator State Management Library
This is a JavaScript library that provides functions to manage the state of a calculator. With this library, you can easily implement a functioning calculator in any front-end library of your choice, including vanilla JS, React, Svelte, SolidJS, Lit, Vue, Angular, and more.
Installation
You can install this library via NPM:
npm install calc-run --save
Usage
To use the library, you need to import it into your JavaScript file:
import { createCalculator } from 'calc-run';
Creating a Calculator
To create a new calculator, you can use the createCalculator function. This function takes an optional initial value and returns a calculator object that has the following properties:
- statement: a function that returns the current statement in the calculator's state
- output: a function that returns the current output
- handleKey: a function to trigger the input of a key
Here's an example of creating a new calculator with an initial value of 10:
const calculator = createCalculator({ initialValue: 10 });
Using the Calculator
Once you have a calculator object, you can use its properties to perform calculations. For example, to add 5 to the current value of the calculator, you can call the handleKey
function:
calculator.handleKey('+');
calculator.handleKey('5');
calculator.handleKey('=');
console.log(calculator.statement()); // statement: 10+5=15
console.log(calculator.output()); // output: 15
Similarly, you can subtract, multiply, or divide the current value of the calculator:
calculator.handleKey('-');
calculator.handleKey('3');
calculator.handleKey('=');
console.log(calculator.output()); // output: 12
calculator.handleKey('*');
calculator.handleKey('2');
calculator.handleKey('=');
console.log(calculator.output()); // output: 24
calculator.handleKey('/');
calculator.handleKey('4');
calculator.handleKey('=');
console.log(calculator.output()); // output: 6
You can also clear the current value of the calculator:
calculator.clear(); // or calculator.handleKey('c');
console.log(calculator.output()); // output: 0
Examples
Here's an example of using the calc-run library in a React component:
import React, { useState } from 'react';
import { CalculatorState, createCalculator, Operator } from 'calc-run';
function MiniCalc() {
const [state, setState] = useState<CalculatorState>();
const calculator = useMemo(() => createCalculator({ updateCallBack: setState }), []);
if (!state) {
return null;
}
return (
<div>
<p>Statement: {state.statement}</p>
<p>Output: {state.output}</p>
<button onClick={() => calculator.handleKey('1')}>1</button>
<button onClick={() => calculator.handleKey('2')}>2</button>
<button onClick={() => calculator.handleKey('3')}>3</button>
<button onClick={() => calculator.handleKey(Operator.addition)}>Plus</button>
<button onClick={() => calculator.handleKey(Operator.subtraction)}>Minus</button>
<button onClick={() => calculator.handleKey('=')}>Equals</button>
</div>
);
}
Conclusion
The calculator state management library provides an easy way to manage the state of a calculator in any front-end library of your choice. With this library, you can focus on building the UI for your calculator, while the library takes care of the state management.
1 year ago