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
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.
- 1. Rendering
Creating portals with custom usePortal hook
We will change the screens with useStepper hook
Manage components appearance with useToggle hook
Removing server warnings for useLayoutEffect with custom hook
First interaction detection with useOnInteraction hook
- 2. Forms
- 3. Events
Read the scroll metadata and direction with useScroll hook
Using clipboard with useClipboard hook
Detect outside click with the useClickOutside hook
Deep dive into useIntersectionObserver hook
Element size measurement with useElementSize hook
- 4. Guards
- 5. Interactions