Summary: Use the prop collection pattern to create reusable animated counters that can be applied to and customized for many different use cases. The hook should also help users not misuse your components.
The idea is of prop collections is that to achieve the intended functionality, the hook returns props that are intended to be passed to components.
In this example, I created the hook
useAnimatedCounter to manage the state of counters with animation functionality.
The four components as demonstrated here (a simple counter, star rating, "medium-clap-like" hearts, progress ring) are all powered by the same hook. Go ahead and click on the the stars, number, heart and progress ring!
This hook is intended to be used on an animating component like below. (This component uses the Framer Motion React library, but this is an implementation detail).
useAnimatedCounter could take in four arguments
- A minimum value
- A maximum value
- An initial value
- The increment / step size
useAnimatedCounter could return four collections of props, one for each of the following:
- The reset button
- The increment button
- The clickable animating component
- The display of the count (with built in accessibility features)
It could also return managed and derived states such as:
- Which animation type to display (the animation on
no operationbecause the value is above the intended maximum value)
- Number of times the buttons have been clicked
- Whether the counter is at the starting position or not
- Where the counter is at the end / maximum position or not
- How far the count is to the maximum possible value ( a fraction from zero to one)
Here's a possible API for the hook
And you can spread the prop collections to your own components like this
Here's the hook
The simple counter
The star rating
The progress ring