How To Create Custom Cursor in React Js

Hello everyone, today I want to make simple and quick guide on how to make custom cursor in react js only using useRef hooks, onMouseMove attribute, and some css for your desired cursor looks.

In this tutorial I assume you already create project folder, so the first step you should do is to import useRef in your App.js file and use it in our function and named it cursor.

import { useRef } from “react”;
function App() {
  const cursor = useRef(null)
  return (
    <div className="App"></div>
  )
}
export default App

Second, add minHeight and minWidth syle in your App div to fill your browser view so later we can see the result.

import { useRef } from “react”;
function App() {
  const cursor = useRef(null)
  return (
    <div
     className="App"
     style={{minHeight: "100vh", "minWidth: "100vw"}}
    >
    </div>
  )
}
export default App

Third, let’s make new div inside App div and give it className of cursor-style and add ref attribute and assign it with cursor variable.

import { useRef } from “react”;
function App() {
  const cursor = useRef(null)
  return (
    <div
     className="App"
     style={{minHeight: "100vh", "minWidth: "100vw"}}
    >
      <div className="cursor-style" ref={cursor} ></div>
    </div>
  )
}
export default App

Fourth, add onMouseMove attribute in your App div and assign it with some function, let’s call it changePosition.

import { useRef } from “react”;
function App() {
  const cursor = useRef(null)
  return (
    <div
     className="App"
     style={{minHeight: "100vh", "minWidth: "100vw"}}
     onMouseMove={changePosition}
    >
      <div className="cursor-style" ref={cursor} ></div>
    </div>
  )
}
export default App

Fifth, now let’s make changePositon function to make the magic happen.

import { useRef } from “react”;
function App() {
  const cursor = useRef(null)
  const changePosition = (e) => {
    cursor.current.style.top = `${e.clientY}px`;
    cursor.current.style.left = `${e.clientX}px`;
  }
  return (
    <div
     className="App"
     style={{minHeight: "100vh", "minWidth: "100vw"}}
     onMouseMove={changePosition}
    >
      <div className="cursor-style" ref={cursor} ></div>
    </div>
  )
}
export default App

Sixth, after finish in App file, now let’s move into your css file, to customize your cursor.

.App {
  cursor: none;
}
.cursor-style {
  background-color: rgba(0, 255, 255, 0.7);
  height: 2rem;
  width: 2rem;
  border-radius: 100%;
  transform-origin: 100% 100%;
  transform: translate(-50%, -50%);
  position: fixed;
  pointer-events: none;
}

Seventh, lastly don’t forget to import your css file in your App file.

import { useRef } from “react”;
import "./style.css";
function App() {
  const cursor = useRef(null)
  const changePosition = (e) => {
    cursor.current.style.top = `${e.clientY}px`;
    cursor.current.style.left = `${e.clientX}px`;
  }
return (
    <div
     className="App"
     style={{minHeight: "100vh", "minWidth: "100vw"}}
     onMouseMove={changePosition}
    >
      <div className="cursor-style" ref={cursor} ></div>
    </div>
  )
}
export default App

Note: clientY and clientX in changePositon function is a read-only property of the MouseEvent interface provides the vertical and horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page), so it’s important to use position: fixed in your css.

Thank you for reading, I hope this can be helpful for you.