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:

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