useMouse
Track cursor position
Examples
Default Usage
Client - x: NaN, y: NaN
Page - x: NaN, y: NaN
Screen - x: NaN, y: NaN
Default usage
Tracking cursor position.
Mouse position relative to the element
element
Mouse In Element - x: NaN, y: NaN
Element Position - x: NaN, y: NaN
Element Dimensions - width: NaN, height: NaN
Mouse position relative to the element
By passing in the target element, you can get the position of the mouse relative to the element.
API
const state: { screenX: number, screenY: number, clientX: number, clientY: number, pageX: number, pageY: number, elementX: number, elementY: number, elementH: number, elementW: number, elementPosX: number, elementPosY: number,} = useMouse(target?: Target);
const state: { screenX: number, screenY: number, clientX: number, clientY: number, pageX: number, pageY: number, elementX: number, elementY: number, elementH: number, elementW: number, elementPosX: number, elementPosY: number,} = useMouse(target?: Target);
Params
| Property | Description | Type | Default |
|---|---|---|---|
| target | DOM element | () => Element | Element | - |
result
| Property | Description | Type |
|---|---|---|
| screenX | Position left relative to the top left of the physical screen/monitor | number |
| screenY | Position top relative to the top left of the physical screen/monitor | number |
| clientX | Position left relative to the upper left edge of the content area | number |
| clientY | Position top relative to the upper left edge of the content area | number |
| pageX | Position left relative to the top left of the fully rendered content area in the browser | number |
| pageY | Position top relative to the top left of the fully rendered content area in the browser | number |
| elementX | Position left relative to the upper left edge of the target element | number |
| elementY | Position top relative to the upper left edge of the target element | number |
| elementH | Target element height | number |
| elementW | Target element width | number |
| elementPosX | The position of the target element left relative to the top left of the fully rendered content area in the browser | number |
| elementPosY | The position of the target element top relative to the top left of the fully rendered content area in the browser | number |