Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@akshay641/react-step-progress-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

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