useStep

State & data

A React hook for multi-step navigation (wizards, forms, carousels)

Install

$ npm install @usefy/use-step

Quick start

useStep.tsx

import { useStep } from "@usefy/use-step";

function Wizard() {
  const [
    step,
    { goToNextStep, goToPrevStep, canGoToNextStep, canGoToPrevStep },
  ] = useStep(4);

  return (
    <div>
      {step === 0 && <InfoForm />}
      {step === 1 && <ConfirmForm />}
      {step === 2 && <PaymentForm />}
      {step === 3 && <CompleteMessage />}

      <button onClick={goToPrevStep} disabled={!canGoToPrevStep}>
        Back
      </button>
      <button onClick={goToNextStep} disabled={!canGoToNextStep}>
        Next
      </button>
    </div>
  );
}

API reference

`useStep(count, initialStep?)`

Returns a tuple of the current step index and a stable controls object.

Parameters

Parameter	Type	Default	Description
`count`	`number`	—	Total number of steps. Valid indices are `0 .. count - 1` (e.g. `useStep(4)` → `0,1,2,3`). Values `< 1` or non-finite are treated as a single step
`initialStep`	`number`	`0`	Starting step index (floored and clamped to the valid range)

Returns `[currentStep, controls]`

Item	Type	Description
`currentStep`	`number`	The current 0-based step index
`controls`	`UseStepControls`	Stable navigation controls (see below)

Controls

Control	Signature	Description
`goToNextStep`	`() => void`	Advance one step. No-op on the last step
`goToPrevStep`	`() => void`	Go back one step. No-op on the first step
`canGoToNextStep`	`boolean`	Whether there is a next step
`canGoToPrevStep`	`boolean`	Whether there is a previous step
`setStep`	`(step: number \| (current: number) => number) => void`	Jump to a step (value or updater). Floored and clamped to `[0, count - 1]`
`reset`	`() => void`	Reset back to the initial step

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →