useStepper

Category

Utilities

Export Size

447 B

Last Changed

5 days ago

Provides helpers for building a multi-step wizard interface.

Demo

Usage

Steps as array

import { useStepper } from '@reause/core'

const {
  index,
  setIndex,
  steps,
  stepNames,
  current,
  next,
  previous,
  isFirst,
  isLast,
  goTo,
  goToNext,
  goToPrevious,
  goBackTo,
  isNext,
  isPrevious,
  isCurrent,
  isBefore,
  isAfter,
} = useStepper([
  'billing-address',
  'terms',
  'payment',
])

// Access the step through `current`
console.log(current) // 'billing-address'

Type Declarations

export interface UseStepperReturn<StepName, Steps, Step> {
    index: number;
    setIndex: Dispatch<SetStateAction<number>>;
    steps: Steps;
    stepNames: StepName[];
    current: Step;
    next: StepName | undefined;
    previous: StepName | undefined;
    isFirst: boolean;
    isLast: boolean;
    at: (index: number) => Step | undefined;
    get: (step: StepName) => Step | undefined;
    goTo: (step: StepName) => void;
    goToNext: () => void;
    goToPrevious: () => void;
    goBackTo: (step: StepName) => void;
    isNext: (step: StepName) => boolean;
    isPrevious: (step: StepName) => boolean;
    isCurrent: (step: StepName) => boolean;
    isBefore: (step: StepName) => boolean;
    isAfter: (step: StepName) => boolean;
}

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

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

d785e - refactor(core)!: return a flat object from useStepper

v0.1.0 on

4406e - fix(core): resolve useStepper audit findings (#648)