We'll change the screens with useStepper hook

🔰 We'll change the screens with useStepper hook



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 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.