Customize Cursor in React App

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

Having a customized cursor will make your website stand out as it creates a better user experience but before we get started, a basic knowledge of ReactJS is required to follow through with this article.

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 well use to install the packages needed for this tutorial.

step 1

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