Change the size of a custom cursor on click using React

Question

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create an event listener that changes the cursor's class. As a newcomer to web development, any assistance would be greatly appreciated :)

Below is 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 details are as follows :

.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'm feeling a bit lost on what steps to take next :/

css reactjs css-selectors mouse-cursor custom-cursor

Answer 1

Answer №1

To implement this feature, you can attach a click event listener to the document or window object and modify the cursor style by applying a CSS class or directly manipulating the HTML element's JS style property. Later on, revert these changes after a specified duration.

Creating a Custom Cursor Style on Click -

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

Click Event Listener Implementation -

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

    // Alternatively, apply changes directly via JavaScript like so
    // cursor.current.style.width = '15px'
    // cursor.current.style.height = '15px'

    setTimeout(() => {
      // Revert changes after a set time
      cursorRef.current.classList.remove("clicked");

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

Answer 2

To implement this feature, you can attach a click event listener to the document or window object and modify the cursor style by applying a CSS class or directly manipulating the HTML element's JS style property. Later on, revert these changes after a specified duration.

Creating a Custom Cursor Style on Click -

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

Click Event Listener Implementation -

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

    // Alternatively, apply changes directly via JavaScript like so
    // cursor.current.style.width = '15px'
    // cursor.current.style.height = '15px'

    setTimeout(() => {
      // Revert changes after a set time
      cursorRef.current.classList.remove("clicked");

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

Answer 3

Answer №2

If you want to add animation to the UI, you can achieve it by attaching an event listener to either the window object or the custom cursor itself.

Below is a sample code snippet that demonstrates this:

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

  React.useEffect(() => {
    let timer;

    const mouseX = (event) => event.clientX;
    const mouseY = (event) => event.clientY;

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

    window.addEventListener("mousemove", onMove);

    return () => {
      clearInterval(timer);
    };
  }, []);

  const onClick = (e) => {
    e.preventDefault();
    setClicked((pre) => !pre);
  };

  const clickedClass = isClicked ? "-clicked" : "";

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

export default CustomCursor;

To see this in action, check out this live example on CodeSandbox

Answer 4

If you want to add animation to the UI, you can achieve it by attaching an event listener to either the window object or the custom cursor itself.

Below is a sample code snippet that demonstrates this:

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

  React.useEffect(() => {
    let timer;

    const mouseX = (event) => event.clientX;
    const mouseY = (event) => event.clientY;

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

    window.addEventListener("mousemove", onMove);

    return () => {
      clearInterval(timer);
    };
  }, []);

  const onClick = (e) => {
    e.preventDefault();
    setClicked((pre) => !pre);
  };

  const clickedClass = isClicked ? "-clicked" : "";

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

export default CustomCursor;

To see this in action, check out this live example on CodeSandbox

Change the size of a custom cursor on click using React

Answer №1

Answer №2

Similar questions

Excessive text in HTML div element

What could be causing my CSS relative positioning to malfunction?

What is the best way to implement a personalized hook in React that will return the number of times a specific key is pressed?

The Fetch API within DatoCMS isn't able to retrieve all published posts

Something seems off with Chrome

Tips for updating the hover effect color on Material UI select component options in a React JS application

Enhancing OpenSeadragon images with custom overlays and managing error messages

Tips for organizing a grid to achieve the desired layout

What is the best way to clear radio button selections in a form using reactjs?

Ways to adjust the div height to match the span height

Error message: Unable to locate elementError: Selenium VBA

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Custom time selector does not automatically set the default value

Adaptable HTML design with alignment features

Tips for Customizing Dialogs with CSS Classes in mui5 Using Emotion/Styled

Create a script that will split a single block of text into separate sections based on predefined conditions

Stop the page from scrolling

The React component was not able to receive any children as input

Achieving text-overflow: ellipsis functionality with mandatory content following

Encountering an issue when attempting to send a post request with an image, resulting in the following error: "Request failed with status code