useMouse Hook React

import { useState, useEffect } from "react";

const useMouse = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return mousePosition;
};

// Usage
const MousePositionExample = () => {
  const { x, y } = useMouse();

  return (
    <div>
      <p>
        Mouse Position: X: {x}, Y: {y}
      </p>
    </div>
  );
};