Scientific Calculator Component

A draggable, floating scientific calculator component for React applications.

Features

• Draggable: Move the calculator anywhere on the screen.
• Scientific Functions: Includes trigonometric functions (sin, cos, tan), logarithms (log, ln), roots, and powers.
• Responsive: Clean, dark-mode UI.
• Lightweight: Built with react-draggable and mathjs.

Installation

npm install scientific-calculator-component
# or
yarn add scientific-calculator-component
# or
pnpm add scientific-calculator-component

Usage

Import the component and the styles in your React application:

import { useState } from 'react';
import { ScientificCalculator } from 'scientific-calculator-component';
import 'scientific-calculator-component/dist/style.css'; // Import styles

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Close Calculator' : 'Open Calculator'}
      </button>

      <ScientificCalculator 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)} 
        startPosition={{ x: 100, y: 100 }}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | isOpen | boolean | true | Controls the visibility of the calculator. | | onClose | () => void | undefined | Callback function when the close button is clicked. | | startPosition | { x: number, y: number } | { x: 100, y: 100 } | Initial position of the calculator. |

License

MIT