useStepper

v0.0.14testeddemo

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, unknown>>(
  steps: MaybeRef<T>,
  initialStep?: keyof T,
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>;

Parameters

Parameter	Type	Default	Description
`steps`	`MaybeRef<StepName[] \| Record<string, StepValue>>`	—	The list of steps, or a record keyed by step name
`initialStep`?	`StepName`	—	The step to start on (defaults to the first step)

Returns

UseStepperReturn<StepName, StepName[] | Record<string, StepValue>, StepValue>The stepper state and navigation helpers

Property	Type	Default	Description
`steps`	`Readonly<Ref<Steps>>`	—	List of steps.
`stepNames`	`Readonly<Ref<StepName[]>>`	—	List of step names.
`index`	`Ref<number>`	—	Index of the current step.
`current`	`ComputedRef<Step>`	—	Current step.
`next`	`ComputedRef<StepName \| undefined>`	—	Next step name, or undefined if the current step is the last one.
`previous`	`ComputedRef<StepName \| undefined>`	—	Previous step name, or undefined if the current step is the first one.
`isFirst`	`ComputedRef<boolean>`	—	Whether the current step is the first one.
`isLast`	`ComputedRef<boolean>`	—	Whether the current step is the last one.
`at`	`(index: number) => Step \| undefined`	—	Get the step at the specified index.
`get`	`(step: StepName) => Step \| undefined`	—	Get a step by the specified name.
`goTo`	`(step: StepName) => void`	—	Go to the specified step.
`goToNext`	`() => void`	—	Go to the next step. Does nothing if the current step is the last one.
`goToPrevious`	`() => void`	—	Go to the previous step. Does nothing if the current step is the first one.
`goBackTo`	`(step: StepName) => void`	—	Go back to the given step, only if the current step is after it.
`isNext`	`(step: StepName) => boolean`	—	Checks whether the given step is the next step.
`isPrevious`	`(step: StepName) => boolean`	—	Checks whether the given step is the previous step.
`isCurrent`	`(step: StepName) => boolean`	—	Checks whether the given step is the current step.
`isBefore`	`(step: StepName) => boolean`	—	Checks if the current step is before the given step.
`isAfter`	`(step: StepName) => boolean`	—	Checks if the current step is after the given step.