react-use/docs/useMouse.md

# `useMouse` and `useMouseHovered`

React sensor hooks that re-render on mouse position changes. `useMouse` simply tracks
mouse position; `useMouseHovered` allows you to specify extra options:

- `bound` — to bind mouse coordinates withing the element.
- `whenHovered` — whether to attach `mousemove` event handler only when user hovers over the element.


## Usage

```jsx
import {useMouse} from 'react-use';

const Demo = () => {
  const ref = React.useRef(null);
  const {docX, docY, posX, posY, elX, elY, elW, elH} = useMouse(ref);

  return (
    <div ref={element}>
      <div>Mouse position in document - x:{docX} y:{docY}</div>
      <div>Mouse position in element - x:{posX} y:{posY}</div>
      <div>Element position - x:{elX} y:{elY}</div>
      <div>Element dimensions - {elW}x{elH}</div>
    </div>
  );
};
```


## Reference

```ts
useMouse(ref);
useMouseHovered(ref, {bound: false, whenHovered: false});
```