Custom Cursor, modify size when click with React

Question

I've made a custom cursor on my react app, but I would like to animate it when the user click. Like to decrease the size or something like that. The cursor is in a components that I've call on my Index.js file. I don't know how to make a addlisterner element who change the class of the cursor. I'm new in web development if someone wants to help me, it will be grate :)

Here's the Custom Cursor component :

import React, { useRef } from 'react'

function CustomCursor() {

const cursorRef = useRef(null)

React.useEffect(() => {
    document.addEventListener('mousemove', (event)=>  {
        const {clientX, clientY} = event;
        const mouseX = clientX - cursorRef.current.clientWidth /2;
        const mouseY = clientY - cursorRef.current.clientHeight /2;
        cursorRef.current.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`
    })
}, [])

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

export default CustomCursor 

The css class in detail :

.custom-cursor {
  z-index: 9999;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #8c8c8cb8;
  pointer-events: none;
  overflow: hidden;
  transform: translate(-50%, -50%);
  position: fixed;
}

I really don't know what to try :/

Answer 1

You can achieve this by adding the click event listener to the document or window object and updating the cursor style by adding the CSS class or using the HTML element's JS style property. And after some time, removing though changes.

Custom Cursor style when clicked -

.custom-cursor.clicked {
  width: 10px;
  height: 10px;
}

Event listener for click event -

const handleCursorClick = () => {
    // change the cursor styles
    cursorRef.current.classList.add("clicked");

    // OR make changes using the direct using JS for example
    // cursor.current.style.width = '15px'
    // cursor.current.style.height = '15px'

    setTimeout(() => {
      // after some time removes though changes
      cursorRef.current.classList.remove("clicked");

      // cursor.style.width = '20px'  <-- base style
      // cursor.style.height = '20px' <-- base style
    }, 100);
  };

Answer 2

You can animate the UI either by adding event listener to the window object or the custome cursor itself,

Here is the working code :

function CustomCursor() {
  const [isClicked, setClicked] = useState(false);
  const cursorRef = useRef(null);

  React.useEffect(() => {
 // set a slight delay to take effect on mouse move
    let timer;
// Get ClientX of Mouse pointer on the Window
    const mouseX = (event) => event.clientX;

// Get ClientY of Mouse pointer on the Window
    const mouseY = (event) => event.clientY;

// Calculate Pos'n of Cursor/mouse
    const positionElement = (event) => {
      const mouse = {
        x: mouseX(event),
        y: mouseY(event)
      };
      cursorRef.current.style.top = mouse.y + "px";
      cursorRef.current.style.left = mouse.x + "px";
    };
    const onMove = (event) => {
      timer = setTimeout(positionElement(event), 1);
    };

// add `mousemove` listner for window
    window.addEventListener("mousemove", onMove);

    return () => {
    //Clear Intervalid on Unmount
      clearInterval(timer);
    };
  }, []);

// Mouse click handler
  const onClick = (e) => {
    e.preventDefault();
    setClicked((pre) => !pre);
  };

// Change class here
  const clickedClass = isClicked ? "-clicked" : "";

  return (
    <div
      onClick={onClick}
      className={`custom-cursor${clickedClass}`}
      ref={cursorRef}
    ></div>
  );
}

export default CustomCursor;

Check this working sandbox