Understanding the steps
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.
Creating our steps
Import the constructor
In order to create our steps we need to import the defineSteps from the library.
import { defineStepper } from "@stepperize/react";Create the steps
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" }
);