useMouse

Overview

Track cursor position

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useMouse.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useMouse.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useMouse.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useMouse.json

Track cursor position

Examples

Default Usage

Mouse position 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);

Params

| Property | Description | Type | Default | | -- | | -- | | -- | | 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 |