Reference

useStepper() hook

The useStepper hook provides the following methods and properties:

const {
  activeStep,  // The current step index, starting from zero
  data, // The data object to hold custom data
  goToNextStep,  // Function to go to the next step
  goToPreviousStep,  // Function to go to the previous step
  handleSubmit,  // Function to validate a step before moving to the next one
  isFirstStep,  // Boolean indicating if the current step is the first one (index 0)
  isLastStep,  // Boolean indicating if the current step is the last one (index steps.length - 1)
  isLoading,  // Boolean indicating if the stepper is loading, when handleSubmit is async
  setActiveStep,  // Function to jump to a specific step
  setData,  // Function to update the data object
  totalSteps,  // The total number of steps
} = useStepper()

<Stepper> component

The <Stepper> component accepts the following props:

<Stepper
  steps={steps}
  onComplete={() => {
    alert('Stepper completed!')
  }}
>
  {({ step }) => {step}}
</Stepper>