Cursor Custom Hook: Spice up That Mouse Cursor
Let’s take a minute to appreciate just how useful the mouse cursor is. It’s empowers a considerable amount of functionality from scrolling through websites clicking on websites, yet it looks so pedestrian, just sitting on the screen as a little white/black arrow, that turns into a hand when you hover over links. A little boring and certainly a boon when attempting to provide some interactivity within key areas of a website. So, in an attempt to breathe new life into one of my own projects, I designed a Custom Cursor hook.
The hook basically the big brain behind the component, doing all the heavy lifting with a useEventListener hook I made to make working with event listeners a bit easier. The code for useEventListener will be posted at the end of this article. But enough, let’s get into this.
useCursor Hook
We start off the festivities with our trusty useState hook. The state is called cursor to keep things simple and comes with a setCursor function to update it with the latest values. In the example above, a default object of x and y are…
