useHover

Pointer hover state with props to spread, ignoring touch.

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

Tracks pointer hover through onPointerEnter and onPointerLeave. Touch pointers are ignored so a tap does not leave an element stuck in its hover state.

Usage

import { useHover } from '@gaudi/design-system/hooks';
const { isHovered, hoverProps } = useHover();
<Card {...hoverProps}>{isHovered ? 'Paused' : 'Playing'}</Card>

Examples

Pause rotating content

Storybook

API

2 options

2 return values

Accessibility

Hover is an enhancement. Anything revealed on hover must also appear on focus (track :focus-within or onFocus) and be reachable on touch.

Notes

Use CSS :hover for purely visual effects; use the hook when hover changes behaviour, such as pausing a carousel.

useCopyToClipboardCopy text with a temporary copied state and a fallback.useEventListenerDeclarative DOM event listener with cleanup.useHotkeyKeyboard shortcuts with platform-aware mod keys.useMousePositionTrack viewport, page and optional element-relative pointer coordinates.useOnClickOutsideRun a callback when a press lands outside one or more elements.useScrollLockLock page scrolling while a custom overlay is open.