A library for creating step-by-step workflows in your applications.
- 🚀 Fast
- 🔥 Powerful
- 📦 Lightweight, < 1kB (gzip)
- 🪄 Typesafe
- 🔗 Composable
- 🎨 Unstyled
npm i @stepperize/react
The main idea is that we can define our IDs that will identify each step. When we define the steps, we get an object that contains everything we need to build our stepper.
In order to create our steps we need to import the defineSteps
from the library.
import { defineStepper } from "@stepperize/react";
defineStepper
is a function that allows us to get a Provider, a hook and the array of steps we are using.
The only mandatory value for each step is the id
. Then, we can add whatever we need and this will be typesafe when we use the hook.
const { Scoped, useStepper, steps } = defineStepper(
{ id: "step-1", title: "Label 1", description: "Description 1" },
{ id: "step-2", title: "Label 2", description: "Description 2" },
{ id: "step-3", title: "Label 3", description: "Description 3" },
{ id: "step-4", title: "Label 4", description: "Description 4" }
);
Visit the documentation to see more details.