@akshay641/react-step-progress-bar/Readme.md

A customizable React stepper progress component.

# React Step Progress Bar

A customizable stepper progress component for React. This lightweight component displays a multi-step progress bar that can be easily integrated into any React application, making it perfect for forms, wizards, or onboarding flows.

## Features

- **Customizable:** Easily configure the total number of steps, the current active step, colors, dimensions, and more.
- **Responsive:** Automatically adjusts to the container size.
- **Lightweight:** Minimal dependencies and a simple API for quick integration.
- **Easy to Use:** Plug and play with a clear and intuitive interface.

## Installation

Install the package via npm:

```bash
npm install @akshay641/react-step-progress-bar

```
After installing, import and use the component in your React application:

![Screenshot Description](./src/images/stepper-img.png)

## Usage 
After installing, import and use the component in your React application:

```import React, { useState } from "react";
import Stepper from "@akshay641/react-step-progress-bar";

const App = () => {
  const totalSteps = 4;
  const [currentStep, setCurrentStep] = useState(0);

  const handleNext = () => {
    if (currentStep < totalSteps - 1) {
      setCurrentStep(currentStep + 1);
    } else {
      // Handle final step (e.g., submission)
      console.log("All steps completed!");
    }
  };

  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  return (
    <div>
      <Stepper totalSteps={totalSteps} currentStep={currentStep} />
      <div style={{ marginTop: "20px" }}>
        <button onClick={handleBack} disabled={currentStep === 0}>
          Back
        </button>
        <button onClick={handleNext}>Next</button>
      </div>
    </div>
  );
};

export default App;
```
## Props

| Prop         | Type   | Default    | Description                                        |
|--------------|--------|------------|----------------------------------------------------|
| totalSteps   | number | Required   | Total number of steps in the progress bar.         |
| currentStep  | number | Required   | The index of the current active step (zero-based). |
| activeColor  | string | #0E66CE    | Background color for completed or active steps.    |
| inactiveColor| string | gray       | Background color for pending or inactive steps.    |
| height       | string | 4px        | Height of each progress segment.                   |
| margin       | string | 0 0.5rem   | Margin around each segment.                        |
| borderRadius | string | 9px        | Border radius for the progress segments.           |
| className    | string | ""         | Additional CSS classes for the container.          |

Customization
You can tailor the component's look and feel by adjusting the props. For example:
```
<Stepper
  totalSteps={4}
  currentStep={2}
  activeColor="#28a745"       // Active steps will be green.
  inactiveColor="#e0e0e0"     // Inactive steps will be light gray.
  height="6px"
  margin="0 0.3rem"
  borderRadius="3px"
/>
```