@akshay641/react-step-progress-bar/src/Stepper.js

A customizable React stepper progress component.

import React from "react";
import PropTypes from "prop-types";

/**
 * @param {Object} props
 * @param {number} props.totalSteps
 * @param {number} props.currentStep
 * @param {string} [props.activeColor="#0E66CE"]
 * @param {string} [props.inactiveColor="gray"]
 * @param {string} [props.height="4px"]
 * @param {string} [props.margin="0 0.5rem"]
 * @param {string} [props.borderRadius="9px"]
 * @param {string} [props.className=""]
 */
const Stepper = ({
  totalSteps,
  currentStep,
  activeColor = "#0E66CE",
  inactiveColor = "gray",
  height = "4px",
  margin = "0 0.5rem",
  borderRadius = "9px",
  className = "",
}) => {
  const steps = Array.from({ length: totalSteps });

  return (
    <div className={`flex items-center justify-between mb-4 ${className}`}>
      {steps.map((_, index) => (
        <div
          key={index}
          style={{
            height,
            flex: 1,
            margin,
            borderRadius,
            backgroundColor: index <= currentStep ? activeColor : inactiveColor,
          }}
        ></div>
      ))}
    </div>
  );
};

Stepper.propTypes = {
  totalSteps: PropTypes.number.isRequired,
  currentStep: PropTypes.number.isRequired,
  activeColor: PropTypes.string,
  inactiveColor: PropTypes.string,
  height: PropTypes.string,
  margin: PropTypes.string,
  borderRadius: PropTypes.string,
  className: PropTypes.string,
};

export default Stepper;