@akshay641/react-step-progress-bar v0.1.6

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

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