React Multi Stepper

A lightweight, customizable, and reusable multi-stepper component for React.
It allows you to create step-based workflows such as onboarding, multi-step forms, or guided processes with ease.

🎬 Demo

🚀 Features

• ✅ Easy to use and integrate into any React project
• 🎨 Fully customizable step styles (active, completed)
• ⚡ Built with TypeScript for type safety
• 🧩 Context-based state management with hooks
• 🧪 Tested with Vitest + React Testing Library (83% coverage)

📦 Installation

npm install reactjs-multi-stepper
# or
yarn add reactjs-multi-stepper

🔨 Basic Usage

import { MultiStepper,MultiStepperProvider,useMultiStepper } from "reactjs-multi-stepper";

function App() {
  // Define reusable base style
  const baseContentStyle = {
    width: "60%",
    height: "10vh",
    marginBlock: "5vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: "0.5vw",
  };

  const Component = () => {
    const { handleNextStep } = useMultiStepper();
    return <MultiStepper onClickNext={handleNextStep} />;
  };

  return (
    <MultiStepperProvider
      steppers={[
        {
          active: true,
          title: "Step One",
          children: (
            <div
              style={{
                ...baseContentStyle,
                backgroundColor: "rgba(255, 0, 0, 0.5)",
              }}
            >
              Step One Content
            </div>
          ),
        },
        {
          id: 2,
          active: false,
          title: "Step Two",
          children: (
            <div
              style={{
                ...baseContentStyle,
                backgroundColor: "rgba(0, 0, 255, 0.5)",
              }}
            >
              Step Two Content
            </div>
          ),
        },
        {
          id: 3,
          active: false,
          title: "Step Three",
          children: (
            <div
              style={{
                ...baseContentStyle,
                backgroundColor: "rgba(0, 128, 0, 0.5)",
              }}
            >
              Step Three Content
            </div>
          ),
        },
      ]}
    >
      <Component />
    </MultiStepperProvider>
  );
}

export default App;

🧩 API Reference

MultiStepperProvider Props

| Prop | Type | Required | Description | | ------------- | ------------ | -------- | -------------------------------------------------------------- | | steppers | StepperType[] | ✅ | Array of step configurations | | children | ReactNode | ✅ | Child components that will have access to stepper context | | options | OptionsType | (Optional) Custom icons for step statuses |

StepperType Interface

| Property | Type | Required | Description | | ------------- | ------------ | -------- | -------------------------------------------------------------- | | id | number | ✅ | Unique identifier for the step | | title | string | ✅ | Step title displayed in the stepper | | description | string | ✅ | Step description or subtitle | | children | ReactNode | ✅ | Content to render for this step |

OptionsType

| Property | Type | Required | Description | | -------------- | ---------- | -------- | ------------------------------------------- | | completedIcon| ReactNode | No | Icon to display for completed steps | | activeIcon | ReactNode | No | Icon to display for the active step |

MultiStepper Props

| Prop | Type | Required | Description | | ------------- | ------------ | -------- | -------------------------------------------------------------- | | onClickNext | () => void | ✅ | Callback triggered when the "Next" button is clicked |

useMultiStepper Hook

| Method/Property | Type | Description | | ------------- | ------------ | -------------------------------------------------------------- | | handleNextStep | () => void | Move to the next step | | setStepStatus | (status: StepStatus) => void | Update current step status | | currentStep | number | Current active step number | | totalSteps | number | Total number of steps |

Step Status Types

| Status | Description | | ------------- | -------------------------------------------------------------- | | "active" | Step is currently active and ready for user interaction | | "completed" | Step has been successfully completed |