Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-cute-calculator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Cute Calculator

Introduction

The React Calculator Component is a sleek, customizable calculator built with React. It supports basic arithmetic, error handling, and multiple visual themes for seamless integration into modern web apps.

Features

Basic arithmetic operations (+, -, *, /, %)
Clear and delete functionality
Graceful error handling and prevention of division by zero
Automatically clears errors on next input
Multiple visual themes: pink, purple, blue, green, red, yellow
Responsive layout with accessible styling
Themed via CSS variables for easy customization
Keyboard support — Interact using the keyboard: numbers, operators, Enter, Backspace, and C (can be disabled)
Customizable props — Control theme, keyboard support, IDs, and classNames for integration and styling flexibility
Enjoy

Installation

Clone the repository and install dependencies:

git clone https://github.com/your-username/react-cute-calculator.git
cd react-cute-calculator
npm install
npm start

Components

Calculator

A calculator with cute design and basic arithmetic operations.

Example:

import Calculator from "./components/calculator/calculator";

function App() {
  return (
    <Calculator
      theme="pink"
      initialValue="0"
      precision={2}
      disableKeyboard={false}
      showHeader={true}
      headerText="Cute Calculator"
      fontSize="40px"
      className="my-shadow"
    />
  );
}

export default App;

Prop	Type	Possible values	Default value	Description
theme	string	"pink" \| "purple" \| "blue" \| "green" \| "red" \| "yellow"	"pink"	Color theme of calculator
initialValue	string	string value	"0"	Calculator's initial value
precision	number	valid number	2	Number precision
disableKeyboard	boolean	true \| false	false	Allows typing from keyboard
showHeader	boolean	true \| false	true	Shows or hides header
headerText	string	string value	"Cute Calculator"	Header text
fontSize	string	string value	"2rem"	Text in display size
className	string	valid string	""	Additional class for styling

License

This project is licensed under the MIT License.