useStep

A hook to manage multi-step processes or wizards.

Overview

useStep simplifies managing the current step index in a multi-step process (like a signup wizard). It provides built-in bounds checking and navigation helpers.

Demo

Wizard Logic

Step Manager

A hook to manage multi-step forms or onboarding flows.

👤

Account

API Reference

function useStep(maxStep: number): [number, Helper]

Returns

Returns a tuple [currentStep, helpers]. Helpers include:

  • goToNextStep()
  • goToPrevStep()
  • reset()
  • setStep(step)
  • canGoToNextStep
  • canGoToPrevStep

Usage Example

import { useStep } from 'react-hooks-ts'
 
function Wizard() {
  const [currentStep, { goToNextStep, goToPrevStep }] = useStep(3)
 
  return (
    <div>
      <p>Step {currentStep} of 3</p>
      {currentStep === 1 && <Step1 />}
      {currentStep === 2 && <Step2 />}
      {currentStep === 3 && <Step3 />}
      
      <button onClick={goToPrevStep}>Back</button>
      <button onClick={goToNextStep}>Next</button>
    </div>
  )
}