Migrating 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 Stepper component only accepts one prop, initialStep, which is the initial step to be active initially.

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.

Breaking Changes

defineSteps helper

Stepper Provider

useStepper hook

On this page