Migrating to v2
Learn how to migrate from v1 to v2
Stepperize v2 is a complete rewrite of the original Stepperize library. It comes with a few breaking changes and new features.
Breaking Changes
defineSteps helper
The defineSteps function has been removed. Use defineStepper instead.
const Stepper = 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" }
);Also, defineStepper only requires one id for each step and the type Step no longer
has any other value, since you can send it anything else in favour of automatic inference.
For more information, see the Define section.
Stepper Provider
The Stepper component has been removed. Use Scoped from defineStepper object instead if you want to use with 1 or more Scopes of steps.
- We don't need to pass the array of steps to the component anymore.
- The
Scopedcomponent accepts aninitialprop to configure the initial state.
const { Scoped } = 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" }
);For more information, see the Scoped section.
useStepper hook
The useStepper hook has been removed. Use useStepper from defineStepper instead.
const { useStepper } = 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" }
);For more information, see the Hook section.
In v6, Scoped uses initialStep and initialMetadata instead of initial. See Migrating to v6 when upgrading from v2 to v6.
Last updated on