Custom Cursor in 4 Simple Steps – No External Libraries Needed!

Ever stumbled upon websites with mesmerizing cursors that take the user experience to the next level? You might think achieving that requires complex libraries or long styling, but it's actually easy.

In just four simple steps and a few lines of code, you can bring that magic to your site. Let's dive in and make your cursor stand out! 💻✨

Step 1: Set Up useRef and Attach to the Div

First things first, let's set up a useRef to grab our custom cursor div. This will serve as the canvas for our cursor movements.

import { useRef } from 'react';

const CustomCursor = () => {
  const cursorRef = useRef(null);

  return <div ref={cursorRef} className='custom-cursor' />;
};

export default CustomCursor;

Step 2: Style It Up with Some CSS Magic

Let's make our custom cursor visually appealing! Add this CSS code to give it a stylish look 🎇:

.custom-cursor {
  z-index: 1000;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid #fff;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  position: fixed;
  overflow: hidden;
}

@media (prefers-color-scheme: light) {
  .custom-cursor {
    border: 1px solid #000;
  }
}
/* Feel free to customize the size, colors, and border according to your taste! */

Step 3: The Magic of useEffect

In this useEffect, we're creating a dynamic custom cursor for a React app. The mouseTransformer function adjusts the cursor's position based on mouse movement, providing a real-time, polished user experience. An event listener on the document triggers this function on mouse movement, creating a seamless dance between the cursor and user interaction.

import { useEffect, useRef } from 'react';
import './style.css'; // 🚀 Don't forget to import the CSS for your custom cursor!

const CustomCursor = () => {
  const cursorRef = useRef(null);

  useEffect(() => {
    // 🎨 Mouse transformation magic happens here!
    const mouseTransformer = (event) => {
      const { clientX, clientY } = event;
      const mouseX = clientX - cursorRef.current.clientWidth / 2;
      const mouseY = clientY - cursorRef.current.clientHeight / 2;
      cursorRef.current.style.left = `${mouseX}px`;
      cursorRef.current.style.top = `${mouseY}px`;
    };

    document.addEventListener('mousemove', mouseTransformer);

    // 🚀 Cleanup event listener on component unmount
    return () => document.removeEventListener('mousemove', mouseTransformer);
  }, []);

  return <div ref={cursorRef} className='custom-cursor' />;
};

export default CustomCursor;

Step 4: Import and Let the Magic Begin

import React from 'react';
import ReactDOM from 'react-dom';
import CustomCursor from './path/to/CustomCursor';

ReactDOM.render(
  <React.StrictMode>
    {/* Other components */}
    <CustomCursor />
  </React.StrictMode>,
  document.getElementById('root')
);

Just like that! In just 4 steps, you've crafted your very own React custom cursor without relying on external libraries. 🌈✨ Get creative, experiment with styles, and make your website stand out with a cursor that's as unique.!

Happy coding! 🚀🎨