Migrating to v2

Stepperize v2 is a complete rewrite of the original Stepperize library. It comes with a few breaking changes and new features.

If you are upgrading past v2, continue through Migrating to v3, Migrating to v5, Migrating to v6, and then Migrating to v7.

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. Step data is inferred from the objects you pass to defineStepper, so you can attach titles, descriptions, or any custom fields there.

Stepper Provider

The old Stepper provider component has been removed. Use Scoped from the defineStepper object when you need one or more scoped step flows.

• You no longer pass the array of steps to the provider.
• Scoped owns the stepper context created by that defineStepper call.

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" },
);

useStepper hook

The standalone 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" },
);

Later versions

In v6, Scoped uses initialStep and initialMetadata instead of an initial object. In v7, Scoped becomes Provider and the API is flat again.

Use Migrating to v3 next.