The Calculator Application for arithmetic operations using React, Typescript and MUI

TSX-Calculator

created using Typescript and MUI-core (formerly called Material-UI)

This is our most-used tool calculator with some new design and written using typescript in a NPM package which can be used in your react or Next.js application

Getting Started

Install this package:

npm install tsx-calculator

Import the Counter component:

import { Calculator } from "tsx-calculator";

You can then render the Calculator component like any other React component in JSX like below

<Calculator />

Types of operation

Sign Description
+ Addition
Substraction
* Multiplication
÷ Division
% Percentage value of the last entered number. Eg. If we type 1 and then click this symbol, it will divide this number by 100 and give you 0.01
=/- Negation of the last entered number. Eg. If we type 1 and then click this symbol, it will negate this number and give back -1
AC Clears all the values or operation
. Decimal Point
= Equal to sign

This component also follows the basic arithmetic operation. So, if you do 1 + -2, it will calculate 1-2 and return -1 and if you do 1 – -1, it will calculate 1 + 1 and will return 2

Some images to show how the application works

GitHub

View Github