use-stepper

Linear multi-step flow (wizards, onboarding, checkout) with typed step names.


Package	`@vizejs/composable/use-stepper`
Own the source	`vize lib pull composable:use-stepper`
Runtime exports	`useStepper`
Gzip budget	1024 B

Usage

import { useStepper } from "@vizejs/composable/use-stepper";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useStepper`	state	experimental	safe	stable	none	web, server, worker, native, desktop, terminal	—	—

API

`useStepper`

Linear multi-step flow (wizards, onboarding, checkout) with typed step names. Pass a tuple of names (["account", "billing", "review"] as const, or a plain array literal thanks to const inference) or an object whose keys are the names and whose values carry per-step data; every navigation method only accepts declared names. Synchronous state: SSR-safe and nothing to dispose.

function useStepper<const Steps extends readonly string[]>( steps: Steps, initial?: NoInfer<Steps[number]>, ): Stepper<Steps[number], { readonly [Step in Steps[number]]: Step }>

const wizard = useStepper(["account", "billing", "review"]);
wizard.goTo("billing");
wizard.goTo("shipping"); // type error

`useStepper`

function useStepper<Steps extends Readonly<Record<string, unknown>>>( steps: Steps, initial?: NoInfer<keyof Steps & string>, ): Stepper<keyof Steps & string, Steps>

`useStepper`

function useStepper( steps: readonly string[] | Readonly<Record<string, unknown>>, initial?: string, ): Stepper<string, Readonly<Record<string, unknown>>>

Types

`Stepper`

Stepper state and navigation returned by useStepper.

Member	Type	Description
`stepNames`	`readonly Name[]`	Step names in order.
`index`	`Readonly<ShallowRef<number>>`	Zero-based index of the current step.
`current`	`ComputedRef<Name>`	Name of the current step.
`currentValue`	`ComputedRef<Values[Name]>`	Value of the current step (the name itself for array steps).
`next`	`ComputedRef<Name \| undefined>`	Name of the next step, or `undefined` on the last.
`previous`	`ComputedRef<Name \| undefined>`	Name of the previous step, or `undefined` on the first.
`isFirst`	`ComputedRef<boolean>`	Whether the current step is the first.
`isLast`	`ComputedRef<boolean>`	Whether the current step is the last.
`at`	`(index: number) => Name \| undefined`	Step name at `index`, or `undefined`.
`get`	`<Step extends Name>(step: Step) => Values[Step]`	Value of a step.
`goTo`	`(step: Name) => void`	Jump to a step.
`goToNext`	`() => void`	Advance one step (no-op on the last).
`goToPrevious`	`() => void`	Go back one step (no-op on the first).
`goBackTo`	`(step: Name) => boolean`	Go back to an earlier step; later or current steps are ignored.
`isCurrent`	`(step: Name) => boolean`	Whether `step` is the current step.
`isNext`	`(step: Name) => boolean`	Whether `step` is the step right after the current one.
`isPrevious`	`(step: Name) => boolean`	Whether `step` is the step right before the current one.
`isBefore`	`(step: Name) => boolean`	Whether `step` comes before the current step.
`isAfter`	`(step: Name) => boolean`	Whether `step` comes after the current step.