{"_id":"@ashishkumarojha/react-calculator-component","name":"@ashishkumarojha/react-calculator-component","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ashishkumarojha/react-calculator-component","version":"1.0.0","description":"A beautiful and functional calculator component for React applications","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"echo \"Error: no test specified\" && exit 1","prepublishOnly":"npm run build"},"keywords":["react","calculator","component","ui","math","typescript"],"author":{"name":"Your Name","email":"your.email@example.com"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@types/react":"^18.2.45","@types/react-dom":"^18.2.18","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.9.1","rollup-plugin-dts":"^6.1.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.8.1","typescript":"^5.3.3"},"repository":{"type":"git","url":"git+https://github.com/ashish-kumar-ojha/react-calculator-component.git"},"bugs":{"url":"https://github.com/ashish-kumar-ojha/react-calculator-component/issues"},"homepage":"https://github.com/ashish-kumar-ojha/react-calculator-component#readme","_id":"@ashishkumarojha/react-calculator-component@1.0.0","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-Hp5YhXDHrRFEXvu6NJpeajTutnbSU4h9hCFJtCJGshV6vqN0OJGKLxLQQAAFSj0nhfSOwTwmChicjZ0bRsIPhQ==","shasum":"336489f6cfff67e8e053cd041b71e9ea2754398e","tarball":"https://registry.npmjs.org/@ashishkumarojha/react-calculator-component/-/react-calculator-component-1.0.0.tgz","fileCount":11,"unpackedSize":57812,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCqRsc5UqAEhji1NdF8rCdQauU094+k31gPcw/Xq4C5pwIgLbC0SqhdSdUPuehJoXNxIg0jNFU5bxOjkMPN6g4+gwo="}]},"_npmUser":{"name":"ashishkumarojha","email":"ojhaash247@gmail.com"},"directories":{},"maintainers":[{"name":"ashishkumarojha","email":"ojhaash247@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-calculator-component_1.0.0_1758105850866_0.2637463125944961"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-17T10:44:10.801Z","1.0.0":"2025-09-17T10:44:11.052Z","modified":"2025-09-17T10:44:11.309Z"},"maintainers":[{"name":"ashishkumarojha","email":"ojhaash247@gmail.com"}],"description":"A beautiful and functional calculator component for React applications","homepage":"https://github.com/ashish-kumar-ojha/react-calculator-component#readme","keywords":["react","calculator","component","ui","math","typescript"],"repository":{"type":"git","url":"git+https://github.com/ashish-kumar-ojha/react-calculator-component.git"},"author":{"name":"Your Name","email":"your.email@example.com"},"bugs":{"url":"https://github.com/ashish-kumar-ojha/react-calculator-component/issues"},"license":"MIT","readme":"# React Calculator Component\r\n\r\nA beautiful, customizable calculator component for React applications with modern UI design and full functionality.\r\n\r\n![Calculator Demo](https://img.shields.io/badge/React-18+-blue.svg)\r\n![TypeScript](https://img.shields.io/badge/TypeScript-5+-blue.svg)\r\n![License](https://img.shields.io/badge/License-MIT-green.svg)\r\n\r\n## Features\r\n\r\n- 🎨 **Beautiful UI**: Modern gradient design with light and dark themes\r\n- 📱 **Responsive**: Works perfectly on desktop and mobile devices\r\n- 🎯 **Customizable**: Multiple sizes and themes\r\n- ♿ **Accessible**: Full keyboard navigation and screen reader support\r\n- 🔧 **TypeScript**: Full TypeScript support with type definitions\r\n- 📦 **Lightweight**: Small bundle size with no external dependencies\r\n- 🎭 **Themes**: Light and dark theme support\r\n- 📏 **Sizes**: Small, medium, and large size variants\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install react-calculator-component\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add react-calculator-component\r\n```\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { Calculator } from 'react-calculator-component';\r\n\r\nfunction App() {\r\n  const handleCalculate = (result) => {\r\n    console.log('Calculation result:', result);\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <Calculator \r\n        theme=\"light\"\r\n        size=\"medium\"\r\n        onCalculate={handleCalculate}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `theme` | `'light' \\| 'dark'` | `'light'` | Visual theme of the calculator |\r\n| `size` | `'small' \\| 'medium' \\| 'large'` | `'medium'` | Size of the calculator |\r\n| `onCalculate` | `(result: number) => void` | `undefined` | Callback function called when calculation is performed |\r\n| `className` | `string` | `''` | Additional CSS class name |\r\n\r\n## Examples\r\n\r\n### Basic Usage\r\n\r\n```jsx\r\nimport { Calculator } from 'react-calculator-component';\r\n\r\nfunction BasicCalculator() {\r\n  return <Calculator />;\r\n}\r\n```\r\n\r\n### Dark Theme\r\n\r\n```jsx\r\nimport { Calculator } from 'react-calculator-component';\r\n\r\nfunction DarkCalculator() {\r\n  return <Calculator theme=\"dark\" />;\r\n}\r\n```\r\n\r\n### Different Sizes\r\n\r\n```jsx\r\nimport { Calculator } from 'react-calculator-component';\r\n\r\nfunction SizeExamples() {\r\n  return (\r\n    <div>\r\n      <Calculator size=\"small\" />\r\n      <Calculator size=\"medium\" />\r\n      <Calculator size=\"large\" />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### With Calculation Callback\r\n\r\n```jsx\r\nimport { Calculator } from 'react-calculator-component';\r\n\r\nfunction CalculatorWithCallback() {\r\n  const handleCalculate = (result) => {\r\n    alert(`The result is: ${result}`);\r\n  };\r\n\r\n  return (\r\n    <Calculator \r\n      onCalculate={handleCalculate}\r\n      theme=\"dark\"\r\n      size=\"large\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Custom Styling\r\n\r\n```jsx\r\nimport { Calculator } from 'react-calculator-component';\r\n\r\nfunction CustomCalculator() {\r\n  return (\r\n    <Calculator \r\n      className=\"my-custom-calculator\"\r\n      theme=\"light\"\r\n      size=\"medium\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Calculator Features\r\n\r\n### Basic Operations\r\n- ➕ Addition (`+`)\r\n- ➖ Subtraction (`-`)\r\n- ✖️ Multiplication (`×`)\r\n- ➗ Division (`÷`)\r\n\r\n### Advanced Functions\r\n- 🔄 Clear (`C`) - Reset calculator\r\n- ➕➖ Toggle Sign (`±`) - Change positive/negative\r\n- 📊 Percentage (`%`) - Convert to percentage\r\n- 🔢 Decimal Point (`.`) - Add decimal places\r\n\r\n### Keyboard Support\r\n- Numbers: `0-9`\r\n- Operations: `+`, `-`, `*`, `/`\r\n- Enter or `=` for calculation\r\n- `Escape` or `C` for clear\r\n- `.` for decimal point\r\n\r\n## Styling\r\n\r\nThe component comes with built-in CSS that you can customize. The CSS classes follow a BEM-like naming convention:\r\n\r\n```css\r\n.calculator { /* Main container */ }\r\n.calculator--light { /* Light theme */ }\r\n.calculator--dark { /* Dark theme */ }\r\n.calculator--small { /* Small size */ }\r\n.calculator--medium { /* Medium size */ }\r\n.calculator--large { /* Large size */ }\r\n.calculator-display { /* Display area */ }\r\n.calculator-buttons { /* Button grid */ }\r\n.calculator-button { /* Individual buttons */ }\r\n.calculator-button--number { /* Number buttons */ }\r\n.calculator-button--operator { /* Operator buttons */ }\r\n.calculator-button--function { /* Function buttons */ }\r\n```\r\n\r\n### Custom CSS Example\r\n\r\n```css\r\n.my-custom-calculator {\r\n  border-radius: 20px;\r\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.my-custom-calculator .calculator-button--operator {\r\n  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);\r\n}\r\n```\r\n\r\n## Browser Support\r\n\r\n- Chrome 60+\r\n- Firefox 55+\r\n- Safari 12+\r\n- Edge 79+\r\n\r\n## Development\r\n\r\n### Prerequisites\r\n\r\n- Node.js 16+\r\n- npm or yarn\r\n\r\n### Setup\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone https://github.com/yourusername/react-calculator-component.git\r\n\r\n# Install dependencies\r\nnpm install\r\n\r\n# Start development server\r\nnpm run dev\r\n\r\n# Build for production\r\nnpm run build\r\n```\r\n\r\n### Project Structure\r\n\r\n```\r\nsrc/\r\n├── Calculator.tsx      # Main component\r\n├── Calculator.css      # Styles\r\n└── index.ts           # Exports\r\n```\r\n\r\n## Contributing\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## Changelog\r\n\r\n### 1.0.0\r\n- Initial release\r\n- Light and dark themes\r\n- Three size variants\r\n- Full calculator functionality\r\n- TypeScript support\r\n- Responsive design\r\n\r\n## Support\r\n\r\nIf you have any questions or need help, please:\r\n\r\n1. Check the [documentation](#documentation)\r\n2. Search [existing issues](https://github.com/yourusername/react-calculator-component/issues)\r\n3. Create a [new issue](https://github.com/yourusername/react-calculator-component/issues/new)\r\n\r\n## Acknowledgments\r\n\r\n- Inspired by modern calculator designs\r\n- Built with React and TypeScript\r\n- Styled with CSS Grid and Flexbox\r\n\r\n---\r\n\r\nMade with ❤️ by [Your Name](https://github.com/yourusername)\r\n","readmeFilename":"README.md","_rev":"1-ad79fdc143c09d767c937c57f43f7e89"}