useStep()
A simple abstraction to play with a stepper, don't repeat yourself.
The Hook
1import { Dispatch, SetStateAction, useCallback, useMemo, useState } from 'react'23interface Helpers {4 goToNextStep: () => void5 goToPrevStep: () => void6 reset: () => void7 canGoToNextStep: boolean8 canGoToPrevStep: boolean9 setStep: Dispatch<SetStateAction<number>>10}1112function useStep(maxStep: number): [number, Helpers] {13 const [currentStep, setCurrentStep] = useState(1)1415 const canGoToNextStep = useMemo(16 () => currentStep + 1 <= maxStep,17 [currentStep, maxStep],18 )1920 const canGoToPrevStep = useMemo(() => currentStep - 1 >= 1, [currentStep])2122 const setStep = useCallback(23 step => {24 // Allow value to be a function so we have the same API as useState25 const newStep = step instanceof Function ? step(currentStep) : step2627 if (newStep >= 1 && newStep <= maxStep) {28 setCurrentStep(newStep)29 return30 }3132 throw new Error('Step not valid')33 },34 [maxStep, currentStep],35 )3637 const goToNextStep = useCallback(() => {38 if (canGoToNextStep) {39 setCurrentStep(step => step + 1)40 }41 }, [canGoToNextStep])4243 const goToPrevStep = useCallback(() => {44 if (canGoToPrevStep) {45 setCurrentStep(step => step - 1)46 }47 }, [canGoToPrevStep])4849 const reset = useCallback(() => {50 setCurrentStep(1)51 }, [])5253 return [54 currentStep,55 {56 goToNextStep,57 goToPrevStep,58 canGoToNextStep,59 canGoToPrevStep,60 setStep,61 reset,62 },63 ]64}6566export default useStep
Usage
1import React from 'react'23import { useStep } from 'usehooks-ts'45export default function Component() {6 const [currentStep, helpers] = useStep(5)78 const {9 canGoToPrevStep,10 canGoToNextStep,11 goToNextStep,12 goToPrevStep,13 reset,14 setStep,15 } = helpers1617 return (18 <>19 <p>Current step is {currentStep}</p>20 <p>Can go to previous step {canGoToPrevStep ? 'yes' : 'no'}</p>21 <p>Can go to next step {canGoToNextStep ? 'yes' : 'no'}</p>22 <button onClick={goToNextStep}>Go to next step</button>23 <button onClick={goToPrevStep}>Go to previous step</button>24 <button onClick={reset}>Reset</button>25 <button onClick={() => setStep(3)}>Set to step 3</button>26 </>27 )28}
See a way to make this page better?
Edit there »