Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTrack whether a mouse or pen pointer is over an element, with optional open and close delays so a popover does not flicker, and touch ignored.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when hover must drive state, not just style: show a preview card after a short delay, keep a menu open while the pointer travels to it, or reveal row actions.
Do not use it for styling alone (use hover: classes). Never make hover the only way to reach content; touch and keyboard users cannot hover.
import { useHover } from "@/hooks/use-hover"const { ref, hovered } = useHover<HTMLDivElement>({
enterDelay: 150,
leaveDelay: 100,
})useHover<T extends Element>(options?): { ref, hovered }
| Option | Type | Default | Description |
|---|---|---|---|
enterDelay | number | 0 | Ms the pointer must stay before hovered is true. |
leaveDelay | number | 0 | Ms after leaving before hovered is false. |
Touch pointers are ignored, since they have no hover. Pending timers are cleared when the pointer returns, on unmount and when the element changes.
Hover is a pointer-only signal. Whatever appears on hover must also appear on keyboard focus (use useFocusWithin or the element's onFocus) and be dismissible (WCAG 1.4.13: dismissible, hoverable, persistent).
The hook ships with renderHook tests (use-hover.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.