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

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 (

Back

Next

);
};

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:
`
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"
/>
``