September 21, 2022

Customize Cursor in React App

In this article, I will show you how to create a customized cursor with Reactjs.

Having a custom cursor is an interesting and interactive feature that can be added to web applications to enhance the user experience. A custom cursor is essentially a graphical element that replaces the default cursor in a web application. This can be used to create a unique and interactive user experience, as well as add a level of sophistication to the web application.

You should have Nodejs installed on your machine; If not, click here to download and install Nodejs on your local device. Nodejs installation comes with NPM by default, which we’ll use to install the packages needed for this tutorial.

step 1

Let’s begin by installing React by running the following command on our terminal:

npx create-react-app project-name

You can replace "project-name" above with the name of your choice. After the template is generated, open the folder with the text-editor of your choice.

step 2

We will be using the framer-motion library for the animation, so let's install the library by running the following command on our terminal:

npm i framer-motion

step 3

Now that we have installed all the dependencies, we need to find a way to track the position of the mouse pointer and store it in the useState hook.

import React, { useEffect, useState } from "react";

function App() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (ev: MouseEvent) => {
    setMousePosition({
      x: ev.clientX,
      y: ev.clientY,
    });
  };
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
  }, []);


  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  );
}

export default App;

step 4

Let's import motion from framer-motion and render a div element from motion,and then add variant props to the div element. Don't forget to add className to the element for styling. You can also reference the code below.

import React, { useEffect, useState } from "react";
import { motion, Variants } from "framer-motion";
function App() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (ev: MouseEvent) => {
    setMousePosition({
      x: ev.clientX,
      y: ev.clientY,
    });
  };
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
  }, []);

  const variants: Variants = {
    default: {
      x: mousePosition.x,
      y: mousePosition.y,
    },
  };

  return (
    <div className="App">
      <motion.div className="cursor" variants={variants} animate="default" />
    </div>
  );
}

step 5

In this final step, let's style the cursor. Note that the styling depends on your choice.

.cursor {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  pointer-events: none;
}

Now we have come to the end of this article, I hope you find this article helpful. If so, kindly share this post with more people. You can find the source code on github.