useStepper

v0.0.15testeddemo

A composable for building wizards/steppers over a list or record of steps

Examples

const { current, goToNext, isLast } = useStepper(['first', 'second', 'last']);

const { current, stepNames, goTo } = useStepper({
  account: { title: 'Account' },
  billing: { title: 'Billing' },
});

Demo

Loading demo…

Signatures

export function useStepper<T extends string | number>(
  steps: MaybeRef<T[]>,
  initialStep?: T,
): UseStepperReturn<T, T[], T>;

export function useStepper<T extends Record<string, any>>(
  steps: MaybeRef<T>,
  initialStep?: keyof T,
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>;

Parameters

Parameter	Type	Default	Description
`steps`	`any`	—	The list of steps, or a record keyed by step name
`initialStep`?	`any`	—	The step to start on (defaults to the first step)

Returns

UseStepperReturn<any, any, any>The stepper state and navigation helpers