useStepper documentation

Custom hook for managing a sequence of steps.

Type

Hooks

import

import { useStepper } from '@pillar-ui/hooks'
Go To use-stepper Source CodeIssuesdiscussions

Table of Contents

useStepper

Custom hook for managing a sequence of steps.

Introduction

The useStepper hook is a custom React hook that can be used to manage a sequence of steps in a multi-step process. It provides functions for navigating between steps, as well as properties to check whether the current step is the first or last in the sequence.

Why useStepper

When building multi-step processes, such as forms or wizards, it can be useful to have a way to manage the sequence of steps. The useStepper hook provides an easy-to-use solution for this, with functions for navigating between steps and properties for checking the current step.

Installation

npm install --dev '@pillar-ui/hooks'

Usage

import { useStepper } from '@pillar-ui/hooks'

function MyStepper() {
  const { currentStep, goToNextStep, goToPreviousStep } = useStepper(3)

  return (
    <div>
      <p>Step {currentStep + 1}</p>
      <button onClick={goToPreviousStep} disabled={currentStep= 0}>
        Previous
      </button>
      <button onClick={goToNextStep} disabled={currentStep= 2}>
        Next
      </button>
    </div>
  )
}

In the example above, useStepper is called with an argument of 3, indicating that there are three steps in the sequence. The currentStep property is used to display the current step to the user, and the goToNextStep and goToPreviousStep functions are used to navigate between steps.

Implementation details

The useStepper hook returns an object with the following properties:

  • currentStep: The current step in the sequence.
  • goToNextStep()**: A function that navigates to the next step in the sequence, if there is one.
  • goToPreviousStep(): A function that navigates to the previous step in the sequence, if there is one.
  • jumpToStep(step: number): A function that navigates to the specified step in the sequence.
  • jumpToLastStep(): A function that navigates to the last step in the sequence.
  • jumpToFirstStep(): A function that navigates to the first step in the sequence.
  • isFirst: A boolean indicating whether the current step is the first step in the sequence.
  • isLast: A boolean indicating whether the current step is the last step in the sequence.

Use Cases

  • Form Wizard: The useStepper hook can be used to create a form wizard with multiple steps. Each step of the form can be displayed on a separate page, and the goToNextStep and goToPreviousStep functions can be used to navigate between the pages. This can improve the user experience by breaking up a long and complex form into smaller, more manageable steps.

  • Slideshow: The useStepper hook can also be used to create a slideshow with multiple slides. Each slide can be displayed on a separate page, and the goToNextStep and goToPreviousStep functions can be used to navigate between the slides. This can be useful for displaying a series of images or presenting information in a visually engaging way.

  • Onboarding: The useStepper hook can be used to create an onboarding flow for new users. Each step of the onboarding process can be displayed on a separate page, and the goToNextStep and goToPreviousStep functions can be used to guide the user through the process. This can help new users become familiar with the product or service and reduce the likelihood of user drop-off.

  • Tutorial: The useStepper hook can be used to create a tutorial with multiple steps. Each step of the tutorial can be displayed on a separate page, and the goToNextStep and goToPreviousStep functions can be used to guide the user through the tutorial. This can be useful for teaching users how to use a new feature or product.

  • Product Tour: The useStepper hook can be used to create a product tour for new users. Each step of the product tour can be displayed on a separate page, and the goToNextStep and goToPreviousStep functions can be used to guide the user through the tour. This can be useful for highlighting key features or functionality of the product or service.

TypeScript Support

This hook has full TypeScript support.

Troubleshooting

If you encounter issues while using this hook, please check the following:

  • Make sure you have passed the correct number of steps to the hook when you call it.
  • Check that you are correctly checking the isFirst and isLast properties to enable/disable navigation buttons.
  • If you are having issues with the jumpToStep function, ensure that the step you are trying to jump to is within the range of available steps.

Conclusion

The useStepper hook is a useful tool for managing multi-step processes in React. It provides functions for navigating between steps, properties for checking the current step, and works well with TypeScript.