Advanced React Patterns

Big Head

Prop Collections

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

The useAnimatedCounter could take in four arguments

  1. A minimum value
  2. A maximum value
  3. An initial value
  4. The increment / step size

The useAnimatedCounter could return four collections of props, one for each of the following:

  1. The reset button
  2. The increment button
  3. The clickable animating component
  4. The display of the count (with built in accessibility features)

It could also return managed and derived states such as:

  1. Which animation type to display (the animation on reset, on increment or on no operation because the value is above the intended maximum value)
  2. Number of times the buttons have been clicked
  3. Whether the counter is at the starting position or not
  4. Where the counter is at the end / maximum position or not
  5. 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

My solution

Here's the hook

The simple counter

The heart

The star rating

The progress ring