Skip to content
OBLAIDISH NEWS
ReactUse ships six pointer hooks to fix hover, long-press, and click-outside bugs
TX_674682Engineering

ReactUse ships six pointer hooks to fix hover, long-press, and click-outside bugs

ReactUse releases six lean, production-ready React hooks—useHover, useMousePressed, useLongPress, useDoubleClick, useClickOutside, and useScratch—that fix persistent cross-platform gesture bugs in React apps.

ReactUse has launched six tightly scoped React hooks—useHover, useMousePressed, useLongPress, useDoubleClick, useClickOutside, and useScratch—that fix well-documented bugs in pointer event handling across browsers, devices, and portal-rendered UIs [ReactUse].

useHover avoids flicker by binding mouseenter and mouseleave instead of mouseover and mouseout, and supports refs, DOM nodes, or functions via ReactUse's BasicTarget [ReactUse]. useMousePressed tracks whether a button is actively pressed and reports input type ('mouse', 'touch', or null), attaching mouseup and mouseleave listeners to the window to prevent stuck states after drag-off [ReactUse].

useLongPress eliminates iOS ghost clicks with a one-time touchend listener that calls preventDefault. It returns spreadable event handlers compatible with React’s synthetic events, ensuring state updates are batched [ReactUse]. useDoubleClick uses a 300 ms window to distinguish single from double clicks and blocks iOS double-tap zoom by calling preventDefault on touchend [ReactUse].

useClickOutside relies on composedPath() instead of Element.contains, making it work across shadow DOM and portals. It listens to mousedown and touchstart—before target handlers fire—so modals close without flashing. The enabled flag allows runtime control [ReactUse]. useScratch uses useRafState to limit re-renders to once per animation frame, even at 120 Hz. Listeners are bound to document to maintain drag tracking, and callbacks are accessed via useLatest to avoid rebinding [ReactUse].

All hooks are tree-shakable, TypeScript-ready, and SSR-safe—listeners noop on the server, and hooks return defaults until hydration [ReactUse].

These aren’t edge cases: iOS ghost clicks, broken click-outside in modals, and double-tap interference plague real apps. Each hook is under 40 lines, exposing how much redundant, buggy code teams have rewritten for years. React still offers no official gesture primitives, forcing reliance on bloated libraries or DIY solutions. ReactUse fills the gap with surgical, mobile-first implementations. The win isn’t just correctness—it’s that doing it right is now easier than cutting corners.

operator_channel
[ comments_offline · provider_not_configured ]
transmission_log

Subscribe to the broadcast.

Daily digest of the day's most important tech news. No fluff. Engineering signal only.

// delivered via substack · double-opt-in confirmation