Docs
useStep

A hook to manage step values with useStep.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-step

Usage

"use client"
 
import { useStep } from "@/hooks/use-step"
 
export function Component() {
  const [currentStep, helpers] = useStep(5)
 
  const {
    canGoToPrevStep,
    canGoToNextStep,
    goToNextStep,
    goToPrevStep,
    reset,
    setStep,
  } = helpers
 
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <p>Current step is {currentStep}</p>
      <p>Can go to previous step {canGoToPrevStep ? "yes" : "no"}</p>
      <p>Can go to next step {canGoToNextStep ? "yes" : "no"}</p>
      <button onClick={goToNextStep} type="button">
        Go to next step
      </button>
      <button onClick={goToPrevStep} type="button">
        Go to previous step
      </button>
      <button onClick={reset} type="button">
        Reset
      </button>
      <button
        onClick={() => {
          setStep(3)
        }}
        type="button"
      >
        Set to step 3
      </button>
    </div>
  )
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
initialnumberThe initial value of the step.0Yes

Return Values

NameTypeDescription
currentStepnumberThe current step value.
helpersobjectAn object containing helper functions.

Helper Functions

NameTypeDescription
canGoToPrevStepbooleanReturns true if the previous step is available, otherwise false.
canGoToNextStepbooleanReturns true if the next step is available, otherwise false.
goToNextStepfunctionMoves to the next step.
goToPrevStepfunctionMoves to the previous step.
resetfunctionResets the step value to the initial value.
setStepfunctionSets the step value to the specified value.