🔰 We'll change the screens with useStepper hook

Prelude

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

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.

The implementation of useStepper

Full example

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

Summary

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 want to understand the process of creating useStepper hook - you can check this article.