React Calculator Component

A beautiful, customizable calculator component for React applications with modern UI design and full functionality.

Features

• 🎨 Beautiful UI: Modern gradient design with light and dark themes
• 📱 Responsive: Works perfectly on desktop and mobile devices
• 🎯 Customizable: Multiple sizes and themes
• ♿ Accessible: Full keyboard navigation and screen reader support
• 🔧 TypeScript: Full TypeScript support with type definitions
• 📦 Lightweight: Small bundle size with no external dependencies
• 🎭 Themes: Light and dark theme support
• 📏 Sizes: Small, medium, and large size variants

Installation

npm install react-calculator-component

or

yarn add react-calculator-component

Quick Start

import React from 'react';
import { Calculator } from 'react-calculator-component';

function App() {
  const handleCalculate = (result) => {
    console.log('Calculation result:', result);
  };

  return (
    <div>
      <Calculator 
        theme="light"
        size="medium"
        onCalculate={handleCalculate}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | theme | 'light' \| 'dark' | 'light' | Visual theme of the calculator | | size | 'small' \| 'medium' \| 'large' | 'medium' | Size of the calculator | | onCalculate | (result: number) => void | undefined | Callback function called when calculation is performed | | className | string | '' | Additional CSS class name |

Examples

Basic Usage

import { Calculator } from 'react-calculator-component';

function BasicCalculator() {
  return <Calculator />;
}

Dark Theme

import { Calculator } from 'react-calculator-component';

function DarkCalculator() {
  return <Calculator theme="dark" />;
}

Different Sizes

import { Calculator } from 'react-calculator-component';

function SizeExamples() {
  return (
    <div>
      <Calculator size="small" />
      <Calculator size="medium" />
      <Calculator size="large" />
    </div>
  );
}

With Calculation Callback

import { Calculator } from 'react-calculator-component';

function CalculatorWithCallback() {
  const handleCalculate = (result) => {
    alert(`The result is: ${result}`);
  };

  return (
    <Calculator 
      onCalculate={handleCalculate}
      theme="dark"
      size="large"
    />
  );
}

Custom Styling

import { Calculator } from 'react-calculator-component';

function CustomCalculator() {
  return (
    <Calculator 
      className="my-custom-calculator"
      theme="light"
      size="medium"
    />
  );
}

Calculator Features

Basic Operations

• ➕ Addition (+)
• ➖ Subtraction (-)
• ✖️ Multiplication (×)
• ➗ Division (÷)

Advanced Functions

• 🔄 Clear (C) - Reset calculator
• ➕➖ Toggle Sign (±) - Change positive/negative
• 📊 Percentage (%) - Convert to percentage
• 🔢 Decimal Point (.) - Add decimal places

Keyboard Support

• Numbers: 0-9
• Operations: +, -, *, /
• Enter or = for calculation
• Escape or C for clear
• . for decimal point

Styling

The component comes with built-in CSS that you can customize. The CSS classes follow a BEM-like naming convention:

.calculator { /* Main container */ }
.calculator--light { /* Light theme */ }
.calculator--dark { /* Dark theme */ }
.calculator--small { /* Small size */ }
.calculator--medium { /* Medium size */ }
.calculator--large { /* Large size */ }
.calculator-display { /* Display area */ }
.calculator-buttons { /* Button grid */ }
.calculator-button { /* Individual buttons */ }
.calculator-button--number { /* Number buttons */ }
.calculator-button--operator { /* Operator buttons */ }
.calculator-button--function { /* Function buttons */ }

Custom CSS Example

.my-custom-calculator {
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.my-custom-calculator .calculator-button--operator {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/yourusername/react-calculator-component.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── Calculator.tsx      # Main component
├── Calculator.css      # Styles
└── index.ts           # Exports

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

1.0.0

• Initial release
• Light and dark themes
• Three size variants
• Full calculator functionality
• TypeScript support
• Responsive design

Support

If you have any questions or need help, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue

Acknowledgments

• Inspired by modern calculator designs
• Built with React and TypeScript
• Styled with CSS Grid and Flexbox

Made with ❤️ by Your Name