Lookup

Step lookup is available on the stepper as stepper.lookup (from useStepper()). The same API is exposed as pure helpers from @stepperize/core when you need them without a stepper instance (e.g. in Node for SSR, in shared validation, or in layout logic that only has the steps array).

On the stepper: `stepper.lookup`

When you have a stepper (from useStepper() or the render prop on Stepper.Root), use stepper.lookup:

Method	Description	Returns
`lookup.getAll()`	All steps	`Steps`
`lookup.get(id)`	Step by ID	`Get.StepById<Steps, Id>`
`lookup.getIndex(id)`	Index of step by ID	`number`
`lookup.getByIndex(index)`	Step at index	`Steps[Index]`
`lookup.getFirst()`	First step	`Steps[number]`
`lookup.getLast()`	Last step	`Steps[number]`
`lookup.getNext(id)`	Next step after `id`	`Steps[number]`
`lookup.getPrev(id)`	Previous step before `id`	`Steps[number]`
`lookup.getNeighbors(id)`	`{ prev, next }` for step `id`	`{ prev: Steps[number] \| null; next: Steps[number] \| null }`

There is no has or count; use stepper.lookup.get(id) != null and stepper.lookup.getAll().length if needed.

Usage with useStepper

import * as React from "react";
import {  } from "@stepperize/react";

const {  } = (
  { : "step1", : "Step 1" },
  { : "step2", : "Step 2" },
  { : "step3", : "Step 3" }
);

function () {
  const  = ();

  const  = ..();
  const  = ...;
  const  = ..();
  const  = ..();
  const  = ..("step2");
  const  = ..(....);
  const { ,  } = ..(....);

  return (
    <>
      <>Step { + 1} of {.}</>
      <>Current: {....}</>
      { && < ={() => ..(.)}>Go to {.}</>}
    </>
  );
}

Without a stepper: `generateStepperUtils` from core

When you need step lookup without React or current state (e.g. SSR, validation, layout logic), use generateStepperUtils from @stepperize/core. Install the core package if needed: pnpm add @stepperize/core.

import {  } from "@stepperize/core";

const  = [
  { : "a", : "A" },
  { : "b", : "B" },
  { : "c", : "C" },
] as ;

const  = (...);

.();        // steps
.("b");        // { id: "b", title: "B" }
.("b");   // 1
.(0);   // { id: "a", title: "A" }
.();      // first step
.();       // last step
.("a");    // step "b"
.("b");    // step "a"
.("b"); // { prev: step "a", next: step "c" }

The return type of generateStepperUtils is StepperLookup<Steps> (exported as Utils<Steps> from core).

On the stepper: stepper.lookup

Usage with useStepper

Without a stepper: generateStepperUtils from core

On this page

On the stepper: `stepper.lookup`

Without a stepper: `generateStepperUtils` from core