useStepper Hook

As we saw in the previous section, the useStepper hook provides access to the actions needed to interact with the stepper. It can be used with or without the Scoped component, but in this case it will be used without Scoped.

If you want to know how to use the stepper with the Scoped component, you can read the section Scoped Stepper.

Usage

import { defineStepper } from "@stepperize/react"
 
const { useStepper } = defineStepper(
  { id: "first" },
  { id: "second" },
  { id: "last" },
)
 
const MyStepperComponent = () => {
  const stepper = useStepper()
 
  // Your component logic here
}

How to render content

In Stepperize there are different patterns for rendering components or content within each step.

when

The when function allows to render a component when the stepper is in a specific step.

This function receives 3 parameters:

The first parameter is the step ID.
The second parameter is a function that returns the component to render when the step matches the given ID.
The third parameter is a function that returns the component to render when the step does not match the given ID.

when(id: string, whenFn: (step: Step) => React.ReactNode, elseFn: (step: Step) => React.ReactNode): React.ReactNode

For example:

import { defineStepper } from "@stepperize/react"
 
const { useStepper } = defineStepper(
  { id: "first" },
  { id: "second" },
  { id: "last" },
)
 
const MyStepperComponent = () => {
  const stepper = useStepper()
 
  return (
    <>
      {stepper.when("first", (step) => (
        <p>This is the {step.title} step.</p>
      ))}
 
      {stepper.when("second", (step) => (
        <p>This is the {step.title} step.</p>
      ))}
 
      <p>{stepper.when("last", () => "Finished!", () => "Not yet...")}</p> // "Finished!" | "Not yet..."
    </>
  )
}

Also, you can use the when with the third parameter to render a component when the step is not in a specific step.

switch

Like when, switch allows components to be rendered when the step id is matched, but following the switch logical control structure.

This function receives an object with the step ID as the key and a function that returns the component to render when the step matches the given ID.

switch(steps: { [id: string]: (step: Step) => React.ReactNode }): React.ReactNode

For example:

import { defineStepper } from "@stepperize/react"
 
const { useStepper } = defineStepper(
  { id: "first" },
  { id: "second" },
  { id: "last" },
)
 
const MyStepperComponent = () => {
  const stepper = useStepper()
 
  return (
    <>
      {stepper.switch({
        "first": (step) => <p>This is the {step.title} step.</p>,
        "second": (step) => <p>This is the {step.title} step.</p>,
        "last": (step) => <p>Finished!</p>,
      })}
    </>
  )
}

Through the steps

API Reference

The useStepper hook returns an object with the following properties:

Prop	Type	Default
`all`	`array`
`current`	`object`
`isLast`	`boolean`
`isFirst`	`boolean`
`next`	`function`
`prev`	`function`
`get`	`function`
`goTo`	`function`
`reset`	`function`
`when`	`function`

Define Stepper Scoped stepper