Customize Cursor in React App
Tags: react, javascript, cursor, webdev
Published: 2022-09-29 15:45:04

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](https://nodejs.org/en/download/) 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.

&nbsp;
##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.
&nbsp;
##step 2 
We will be using the [framer-motion](https://www.framer.com/motion/)  library for the animation, so let's install the library by running the following command on our terminal:
`npm i framer-motion`
&nbsp;
##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;

```
&nbsp;
##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>
  );
}

```
&nbsp;
##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](https://github.com/agboolaidris/react-custom-cursor).