JIYIK CN >

Getting the mouse position in React:

1. Set the property on the element onMouseMoveor add an event listener on the window object.
2. Provides event handling functions.
3. Access relevant properties of the event object.

import {useEffect, useState} from 'react';

export default function App() {
  const [coords, setCoords] = useState({x: 0, y: 0});

  const [globalCoords, setGlobalCoords] = useState({x: 0, y: 0});

  useEffect(() => {
    // 👇️ get global mouse coordinates
    const handleWindowMouseMove = event => {
      setGlobalCoords({
        x: event.screenX,
        y: event.screenY,
      });
    };
    window.addEventListener('mousemove', handleWindowMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleWindowMouseMove);
    };
  }, []);

  const handleMouseMove = event => {
    setCoords({
      x: event.clientX - event.target.offsetLeft,
      y: event.clientY - event.target.offsetTop,
    });
  };

  return (
    <div>
      {/* 👇️ Get mouse coordinates relative to element */}
      <div
        onMouseMove={handleMouseMove}
        style={{padding: '3rem', backgroundColor: 'lightgray'}}
      >
        <h2>
          Coords: {coords.x} {coords.y}
        </h2>
      </div>

      <hr />

      <h2>
        Global coords: {globalCoords.x} {globalCoords.y}
      </h2>
    </div>
  );
}

The code examples show how to handle mousemoveevents on a div element or the window object.

mousemoveThe event is fired at an element when the user moves the mouse while the cursor hotspot is inside the element.

To get the mouse coordinates relative to an element on the page, we have to clientXsubtract from offsetLeftand clientYfrom offsetTop.

// 👇️ get mouse coords relative to the an element
const handleMouseMove = event => {
  setCoords({
    x: event.clientX - event.target.offsetLeft,
    y: event.clientY - event.target.offsetTop,
  });
};

offsetLeftThe property returns the number of pixels to the left of the upper left corner of the current element within the offsetParent node.

offsetTopThe property returns the number of pixels between the outer border of the current element and the inner border of the nearest ancestor element.

clientXProperty returns the horizontal coordinate within the application's viewport where the event occurred.

clientYProperty returns the vertical coordinate within the application viewport when the event occurred.

The second example shows how to listen to events on the window object mousemoveto get the global mouse coordinates.

useEffect(() => {
  // 👇️ get global mouse coordinates
  const handleWindowMouseMove = event => {
    setGlobalCoords({
      x: event.screenX,
      y: event.screenY,
    });
  };
  window.addEventListener('mousemove', handleWindowMouseMove);

  return () => {
    window.removeEventListener('mousemove', handleWindowMouseMove);
  };
}, []);

We pass an empty dependencies array to useEffectthe hook because we only want to register the sticky event listener once - when the component mounts.

The function we useEffectreturn from the hook is called when the component unmounts.

We use removeEventListenerthe method to remove the event listener we previously registered.

The cleanup step is important because we want to make sure that we don't have any memory leaks in our application.

screenXProperty returns the horizontal coordinate (offset) of the mouse in global screen coordinates.

screenYProperty returns the vertical coordinate (offset) of the mouse in global coordinates.