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 :/

Amit · Accepted Answer · 2023-01-23 19:46:35Z

0

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);
  };

answered Jan 23, 2023 at 19:46

Amit

3211 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

imnotremi Over a year ago

Hi have tried but taht's not working, maybe I've made a mistake on my code ? Could you check it please ? Here's the code sandbox link : codesandbox.io/s/custom-cursor-kgheqf?file=/src/…

Amit Over a year ago

For some reason, onClick on the div is not working, so the another way of adding an event listener is using the addEventListener method. Here is the link to the sandbox.

Mallikarjun M G · Accepted Answer · 2023-01-24 04:17:01Z

0

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

answered Jan 24, 2023 at 4:17

Mallikarjun M G

5995 silver badges9 bronze badges

2 Comments

imnotremi Over a year ago

HI thank you a lot for your reponse, but I think I did not express myself well, I want to animate the cursor on click, like when you click the cursor take a width of 10px, and 1 second after the click the width come back to 20px. Here's the code sandbox if you know how I can do this : codesandbox.io/s/custom-cursor-kgheqf?file=/src/… :)

Mallikarjun M G Over a year ago

Just change pointer-events: none to pointer-events: all in your class custom-cursor will get you the expected results,

Collectives™ on Stack Overflow

Custom Cursor, modify size when click with React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related