Cursor Custom Hook: Spice up That Mouse Cursor

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

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.

import { useState } from 'react'
import useEventListener from './useEventListener'

export const useCursor = () => {
  const [cursor, setCursor] = useState({ x: 400, y: 400 })

  const onMouseMove = (event) => {
    const { pageX, pageY } = event
    const x = pageX
    const y = pageY
    setCursor({ x, y })
  }

  useEventListener('mousemove', onMouseMove)

  return { 
    x: cursor.x, 
    y: cursor.y 
  }
}

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.

react-hook css javascript programming react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

React Hooks — Should We Be Hooked on Hooks?

My opinion on the advantages of Hooks

Getting Started with React Hooks

Getting Started with React Hooks. When I first started learning React, there was one thing I knew for sure: If you want to use its state and lifecycle methods, you need to use class components — not functional components. According to the docs, hooks let you use state and other React features without writing a class.

React Hooks Tutorial for Beginners: Getting Started With React Hooks

React hooks tutorial for beginners, learn React hooks step by step: Introduction, useState Hook, useState with previous state, useState with object, useState with array, useEffect Hook, useEffect after render, Conditionally run effects, Run effects only once, useEffect with cleanup, useEffect with incorrect dependency, Fetching data with useEffect, useContext Hook, useReducer Hook, useReducer, Multiple useReducers, useReducer with useContext, Fetching data with useReducer, useState vs useReducer, useCallback Hook, useMemo Hook, useRef Hook