Skip to content
LogoLogo

@zap-studio/react-hooks

@zap-studio/react-hooks is a collection of 100+ small, focused React hooks. Each hook ships as its own subpath export — importing one never pulls in unrelated hooks — with SSR-safe defaults and 100% test coverage.

Motivation

Reaching a browser API from React usually means hand-writing a useEffect — a resize listener, a matchMedia subscription, an IntersectionObserver — and each one carries the same two risks: forget the cleanup and you get a leaked listener that keeps firing after unmount, or forget to guard window/document/navigator and the same code throws on the server or hydrates to a value the client's first render did not have.

@zap-studio/react-hooks wraps these APIs — IntersectionObserver, ResizeObserver, the Battery/Geolocation/Share/Wake Lock APIs, matchMedia, and more — behind a small, correct React interface instead of code you write from scratch. Every hook is SSR- and hydration-safe: nothing touches window, document, or navigator outside an effect or a guarded check, so server renders never throw and hydration never mismatches.

Every hook also ships as its own standalone, side-effect-free module — import it on its own and it tree-shakes cleanly. Public hooks never import each other; some share small internal helper modules, so pulling in useIsMobile never drags in unrelated hook code.

Conventions

  • Every hook is available both from the top-level . barrel and from its own subpath (e.g. @zap-studio/react-hooks/sensors/use-is-mobile) — same function either way.
  • Hooks relying on private, non-semver-guaranteed APIs (react-dom internals, mostly) carry an Unstable marker in the hook's own name — useUnstableFiber, not a separate module — so the risk travels with every import and autocomplete hit, not just a path a reader might skip. See Debug / Observability.
  • No hook file imports another hook file.

Hooks by Category

  • Sensors — viewport, network, device, and permission state (useMediaQuery, useOnlineStatus, useGeolocation, useBattery, ...)
  • DOM / Element Interaction — ref'd-element observers and browser chrome APIs (useClickOutside, useIntersectionObserver, useFullscreen, ...)
  • Input — keyboard, gamepad, and pointer input (useKeyPress, useHotkeys, useGamepad, ...)
  • Media — camera, microphone, and screen capture (useCamera, useMediaRecorder, useSpeechRecognition, ...)
  • History & Navigation — popstate and the Navigation API (usePopState, useNavigation, useNavigationBlocker, ...)
  • Network — WebSocket and Server-Sent Events (useWebSocket, useEventSource)
  • PWA — installability and service worker state (useInstallPrompt, useServiceWorker, ...)
  • Commerce — the Payment Request API (usePaymentRequest)
  • Lifecycle — mount/unmount, timers, and async helpers (useMount, useInterval, useAsync, ...)
  • State — local, persisted, and cross-tab state (useLocalStorage, useIndexedDB, useBroadcastChannel, ...)
  • Debug / Observability — render diagnostics built on private React internals (useUnstableRenderCount, useUnstableFiber, ...)

Learn More

Edit on GitHub