> ## Documentation Index
> Fetch the complete documentation index at: https://use-any-hook-d92674ab.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useMousePosition

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

#### **Install**

```bash npm theme={null}
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**

```javascript useMousePosition.example.tsx theme={null}
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>
  );
}
```