Custom Cursor, modify size when click with React - css

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