Skip to content

Commit

Permalink
improve start of useRainbow article
Browse files Browse the repository at this point in the history
  • Loading branch information
ayan4m1 committed Dec 19, 2023
1 parent 628e2f1 commit d2cb3a4
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion articles/react/use-rainbow-hook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ description: A simple custom hook for lerping through the color wheel.
title: useRainbow Hook
---

Let's put together a simple hook in React that performs "linear interpolation" through the color wheel using hooks intelligently. This will give us a "useRainbow" hook that we can use to animate the color of anything on your page.
Let's put together a simple hook in React that performs linear interpolation through the color wheel, giving a rainbow effect.

We'll end up with a "useRainbow" hook that we can use to animate the color of anything on the page.

By leveraging the [requestAnimationFrame API](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) we can make these updates in a performant manner.

There's also some deceptive complexity to the seemingly simple task of "animating through all the colors" - you can either take the shortest path between those two colors or the longest path. In this case, we want to take the long path since we're trying to emulate a rainbow.

To make things easy on ourselves, we will leverage the interpolator provided by the [d3-interpolate](https://d3js.org/d3-interpolate) package.

## The Hook

Expand Down

0 comments on commit d2cb3a4

Please sign in to comment.