@stepperize/react NPM

A library for creating step-by-step workflows in your apps

🚀 Fast and efficient
🔥 Powerful and flexible
📦 Lightweight (1.1kB gzipped)
🪄 Fully type-safe
🔗 Composable architecture
🎨 Unstyled for maximum customization

Installation

npm install @stepperize/react

Quick Start

Import the constructor:

import { defineStepper } from "@stepperize/react";

Define your steps:

const { Scoped, useStepper, steps } = defineStepper(
  { id: "step-1", title: "Step 1", description: "Description for step 1" },
  { id: "step-2", title: "Step 2", description: "Description for step 2" },
  { id: "step-3", title: "Step 3", description: "Description for step 3" },
  { id: "step-4", title: "Step 4", description: "Description for step 4" }
);

Use the hook in your components:

function StepperComponent() {
  const { currentStep, nextStep, prevStep } = useStepper();

  return (
    <div>
      <h2>{currentStep.title}</h2>
      <p>{currentStep.description}</p>
      <button onClick={prevStep}>Previous</button>
      <button onClick={nextStep}>Next</button>
    </div>
  );
}

How It Works

Stepperize allows you to define a series of steps with unique IDs. When you create your steps using defineStepper, you get:

A Scoped component for context management
A useStepper hook for step control
An array of steps for rendering
An utils object with useful functions

The only required field for each step is the id. You can add any additional properties you need, and they'll be fully type-safe when using the hook.