mouse-in-element

Track the pointer position relative to an element.


Package	`@vizejs/composable/mouse-in-element`
Own the source	`vize lib pull composable:mouse-in-element`
Runtime exports	`useMouseInElement`
Gzip budget	3072 B

Usage

import { useMouseInElement } from "@vizejs/composable/mouse-in-element";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useMouseInElement`	input	experimental	deterministic-fallback	stable	caller, reactive-scope	web, desktop	`window`	`useMouse`, `resolveElement`, `tryOnScopeDispose`

API

`useMouseInElement`

Track the pointer position relative to an element. Built on useMouse in client coordinates: every move re-reads the element rectangle, so transforms and scrolling are reflected. Server renders report zero geometry and isOutside: true.

function useMouseInElement( target: MaybeElementTarget, options: UseMouseInElementOptions = {}, ): MouseInElementControls

Types

`UseMouseInElementOptions`

Options for useMouseInElement.

Member	Type	Description
`handleOutside`?	`boolean`	Keep updating element-relative coordinates while the pointer is outside the element. When `false`, they freeze at the last inside position.

`MouseInElementControls`

Reactive state returned by useMouseInElement.

Member	Type	Description
`x`	`Readonly<Ref<number>>`	Latest horizontal coordinate.
`y`	`Readonly<Ref<number>>`	Latest vertical coordinate.
`sourceType`	`Readonly<Ref<MouseSourceType \| null>>`	Device that produced the latest coordinates; `null` before any input.
`elementX`	`Readonly<Ref<number>>`	Pointer position relative to the element's left edge.
`elementY`	`Readonly<Ref<number>>`	Pointer position relative to the element's top edge.
`elementPositionX`	`Readonly<Ref<number>>`	Element left edge in viewport coordinates at the latest update.
`elementPositionY`	`Readonly<Ref<number>>`	Element top edge in viewport coordinates at the latest update.
`elementWidth`	`Readonly<Ref<number>>`	Element width at the latest update.
`elementHeight`	`Readonly<Ref<number>>`	Element height at the latest update.
`isOutside`	`Readonly<Ref<boolean>>`	Whether the pointer is outside the element. `true` during server rendering.
`stop`	`() => void`	Stop updating element-relative state. Idempotent.