Amrit Math UI Library

A React component library for building math-related user interfaces, including calculators, input fields, and utility functions. This library is designed to be modular, easy to use, and customizable for math-focused web applications.

Features

• AdditionUI: A simple calculator for summing numbers.
• Input: Customizable input fields for numeric and text data.
• Button: Styled button components for UI interactions.
• Math Utilities: Helper functions for mathematical operations.
• Validation Utilities: Functions for input validation.

Installation

Install the library using npm:

npm install amrit-math-ui-library

Usage

Import and use components in your React app:

import { AdditionUI } from 'amrit-math-ui-library';
import "amrit-math-ui-library/dist/index.css";

function App() {
  return (
    <div>
      <AdditionUI /> 
    </div>
  );
}

AdditionUI Props

| Prop | Type | Description | |-------------------|---------------------------|--------------------------------------------------| | onResult | (value: number) => void | Callback when sum is calculated | | className | string | Custom class for the calculator container | | style | React.CSSProperties | Inline styles for the calculator container | | inputClass | string | Custom class for input fields | | buttonClass | string | Custom class for the button | | inputStyle | React.CSSProperties | Inline styles for input fields | | buttonStyle | React.CSSProperties | Inline styles for the button | | buttonLabel | string | Text for the button (default: "Add") | | inputLabelNum1 | string | Label for first input (default: "First Number") | | inputLabelNum2 | string | Label for second input (default: "Second Number")| | placeholderNum1 | string | Placeholder for first input | | placeholderNum2 | string | Placeholder for second input |

Example usage with props:

<AdditionUI
  onResult={(sum) => alert(sum)}
  className="my-sum-calc"
  style={{ margin: '20px' }}
  inputClass="my-input"
  buttonClass="my-btn"
  buttonLabel="Calculate Sum"
  inputLabelNum1="Num 1"
  inputLabelNum2="Num 2"
  placeholderNum1="Type first number"
  placeholderNum2="Type second number"
/>

Project Structure

amrit-math-ui-library/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   ├── Input/
│   │   └── AdditionUI/
│   ├── utils/
│   │   ├── mathutils.ts
│   │   └── validation.ts
│   ├── App.tsx
│   └── main.tsx
├── package.json
├── README.md
└── ...

License

MIT

Author

Amrit Pal