useShuffleValues 🎲

A handy react hook to get a random value from an array without repeating the most recent value.

How to use it

Pass in the desired values

const { currentValue, shuffleValues } = useShuffleValues([
    "purple",
    "orange",
    "green",
    "pink",
    "red",
    "blue",
    "yellow",
]);

Use the returned currentValue in your component

<Box
    bg={currentValue}
>
Hi, I'm a Box
</Box>

Call the shuffle function to get the next value

const someFunction = () => {
  shuffleValues();
}

Demo

On our agency website, Complerity.ch we use the hook on several pages.

We style the links with the returned currentValue and call the shuffleValues function onMouseLeave:

224546922-6a257dc5-ef4a-4190-aa0c-7548d161fc74.mp4

We style the menu layer with the returned currentValue and call the shuffleValues function in a gsap timeline callback:

224547163-195d5798-4bac-4cd2-8ac8-6482f1a435ac.mp4

Balancing

If you want to get a value more over another, just pass in the desired value multiple times. Notice: We're using a do-while loop to get the new value, this could lead to performance issues, please read the section below.

Considerations

While the do-while loop works great with unique values, it doesn't perform well with duplicated values. Change the hook when needed:

…
  setCurrentValue((prevValue) => {
      let filteredValues = [];
      for (let i = 0; i < values.length; i++) {
          if (values[i] !== prevValue) {
              filteredValues.push(values[i]);
          }
      }
      return getRandomValue(filteredValues);
  });
…