useMousePosition

Track the mouse position within a specific DOM element using useMousePosition.

Install

npm

npm i use-any-hook

Description

The useMousePosition hook allows you to track the mouse position within a specific DOM element. This is useful for creating interactive components that need to respond to the user’s mouse movements, such as custom tooltips, draggable elements, or dynamic visual effects.

Parameters

Name	Type	Description
ref	React.RefObject	A ref to the DOM element within which the mouse position should be tracked.

Return Values:

Name	Type	Description
x	number	The current x-coordinate of the mouse position within the specified element.
y	number	The current y-coordinate of the mouse position within the specified element.

Example

useMousePosition.example.tsx

import { useMousePosition } from "use-any-hook";

function MyComponent() {
  const ref = React.useRef(null);
  const { x, y } = useMousePosition(ref);

  return (
    <div ref={ref}>
      Mouse Position: `x-axis: ${x}, y-axis: ${y}`
    </div>
  );
}