Article thumbnail

🔰 We will change the screens with useStepper hook



Empower React app with useStepper hook for seamless screen transitions. Revolutionize navigation dynamics, create a captivating user journey effortlessly.


Let's say you have a simple screen with steps. It can look more or less like the one in the gif below:


An example of usage in an application

We'll write a useStepper hook that will have the basic functionality to change the step and will protect us from potential bugs.

In this hook we'll encapsulate common logic for changing steps, so later we don't have to repeat ourselves and we'll make it type-safety.

We want to avoid:

  • Using the wrong key
  • Passing invalid props to component
  • Moving beyond the range of steps
  • Displaying the wrong step
  • Making a mistake in navigation logic

If you interested about how it was created you can check this article.

The usage of useStepper

For a start, look at how we will use our hook. Pay attention to the hints that appear thanks to the TypeScript.


Type safety and protection from passing not allowed props


The implementation of useStepper





Full example

At this link you have the end result. Types, tests, implementation and re-exports.


Now you know how to handle the steps on the user interface in an interesting way. The created solution protects against many basic mistakes that can be made when implementing such functionality.

It is worth noting that the logic itself is simple - the complexity is introduced by TypeScript (as always). So it is up to you whether you want to use this solution with or without TS.

If you enjoyed it, be sure to visit us on Linkedin where we regularly upload content from programming.

If you want to understand the process of creating useStepper hook - you can check this article.

I create content regularly!

I hope you found my post interesting. If so, maybe you'll take a peek at my LinkedIn, where I publish posts daily.


Add your honest opinion about this article and help us improve the content.

created: 20-03-2023
updated: 20-03-2023