useMousePosition

Track viewport, page and optional element-relative pointer coordinates.

HooksInteraction@gaudi/design-system/hooks/interaction/use-mouse-positionView in Storybook Source

Uses pointermove so mouse and pen work together. Updates at most once per animation frame, and cancels pending work when disabled or unmounted. Attach ref to measure local coordinates against an element's bounding rectangle.

Usage

import { useMousePosition } from '@gaudi/design-system/hooks';
const { ref, elementX, elementY, isInside } = useMousePosition();

Examples

Playground

Storybook

API

1 option

3 return values

Accessibility

Pointer readouts are supplementary. Keep every action available to keyboard and touch users; do not announce each move.

Notes

Touch updates occur only while a pointer is moving. Scrolling alone does not refresh the last sample.
For an animated cursor use the existing Pointer component.

PointerA pointer effect scoped to its container, with direct, spring and lazy tracking, hover feedback, and native input fallbacks.useCopyToClipboardCopy text with a temporary copied state and a fallback.useEventListenerDeclarative DOM event listener with cleanup.useHotkeyKeyboard shortcuts with platform-aware mod keys.useHoverPointer hover state with props to spread, ignoring touch.useOnClickOutsideRun a callback when a press lands outside one or more elements.