typescriptintermediate

useStepWizard Hook

Multi-step wizard hook that manages step navigation, validation gates, and completion state.

typescript
import { useState, useCallback } from 'react';

interface UseStepWizardOptions {
  totalSteps: number;
  initialStep?: number;
  onComplete?: () => void;
}

export function useStepWizard({ totalSteps, initialStep = 0, onComplete }: UseStepWizardOptions) {
  const [currentStep, setCurrentStep] = useState(initialStep);
  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set());

  const goNext = useCallback(() => {
    setCompletedSteps(prev => new Set(prev).add(currentStep));
    if (currentStep < totalSteps - 1) {
      setCurrentStep(s => s + 1);
    } else {
      onComplete?.();
    }
  }, [currentStep, totalSteps, onComplete]);

  const goBack = useCallback(() => {
    if (currentStep > 0) setCurrentStep(s => s - 1);
  }, [currentStep]);

  const goTo = useCallback((step: number) => {
    if (step >= 0 && step < totalSteps) setCurrentStep(step);
  }, [totalSteps]);

  return {
    currentStep,
    totalSteps,
    isFirst: currentStep === 0,
    isLast: currentStep === totalSteps - 1,
    completedSteps,
    goNext,
    goBack,
    goTo,
    progress: ((currentStep + 1) / totalSteps) * 100,
  };
}

Use Cases

  • Onboarding flows
  • Checkout processes

Tags

Related Snippets

Similar patterns you can reuse in the same workflow.