Sayed-Batman

A React utility package that provides a customizable Button component and a powerful Counter hook to simplify your development process.

Features

• Customizable Button: Easily style and customize buttons for your React applications.
• Counter Hook: A simple and flexible hook for managing counters, with options for increment, decrement, and reset.
• Lightweight: Designed to be fast and easy to use.

Installation

Install the package via npm:

npm install sayed-batman

Or using Yarn:

yarn add sayed-batman

Usage

1. Using the useCounter Hook

The useCounter hook allows you to manage counters effortlessly.

Example:

import React from "react";
import { useCounter } from "sayed-batman";

const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter({
    initialValue: 10,
  });

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterComponent;

2. Using the Customizable Button

The Button component is highly customizable to match your application’s design.

Example:

import React from "react";
import { Button } from "sayed-batman";

const App = () => {
  return (
    <div>
      <Button
        style={{ backgroundColor: "blue", color: "yellow" }}
        onClick={() => alert("Custom Button Clicked!")}
      >
        Custom Button
      </Button>
    </div>
  );
};

export default App;

API Reference

useCounter

Parameters:

• initialValue (optional): number — The initial value of the counter. Defaults to 0.

Returned Object:

• count: number — The current counter value.
• increment(): function — Increases the counter by 1.
• decrement(): function — Decreases the counter by 1 (minimum value is 0).
• reset(): function — Resets the counter to the initial value.

Button

Props:

• children: ReactNode — The content inside the button.
• onClick (optional): function — Callback function triggered on button click.
• style (optional): CSSProperties — Custom styles for the button.
• className (optional): string — Custom class name for the button.

Contributing

Contributions are welcome! If you have any suggestions, improvements, or find any issues, feel free to open an issue or submit a pull request.

License

This project is licensed under the ISC License.

Author

Sayed

Links

• NPM Package
• GitHub Repository (Add your repository link here)