typescriptintermediate
useStepWizard Hook
Multi-step wizard hook that manages step navigation, validation gates, and completion state.
typescriptPress ⌘/Ctrl + Shift + C to copy
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.
typescriptintermediate
useFetch — Generic Data Fetching Hook
Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.
Best for: API data fetching
#hooks#fetch
typescriptbeginner
useDebounce — Debounced Value Hook
Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.
Best for: Search-as-you-type
#hooks#debounce
typescriptintermediate
useLocalStorage — Persistent State Hook
Sync React state with localStorage including SSR safety, JSON serialization, and cross-tab updates.
Best for: User preferences
#hooks#localstorage
typescriptbeginner
useClickOutside — Outside Click Detection
Detect clicks outside a referenced element to close dropdowns, modals, and popover menus.
Best for: Dropdown menus
#hooks#click-outside