A library for creating step-by-step workflows in your apps
- π Fast and efficient
- π₯ Powerful and flexible
- π¦ Lightweight (< 1kB gzipped)
- πͺ Fully typesafe
- π Composable architecture
- π¨ Unstyled for maximum customization
npm install @stepperize/react
- 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>
);
}
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
The only required field for each step is the id
. You can add any additional properties you need, and they'll be fully typesafe when using the hook.
For more detailed information on usage, configuration, and advanced features, visit our full documentation.
We welcome contributions! Please see our Contributing Guide for more details.
Stepperize is MIT licensed.