Skip to content
LogoLogo

Getting Started

Installation

Import a Hook

Import from the top-level package, or from a hook's own subpath if you want the narrowest possible import — both resolve to the same function:

import { useIsMobile, useMediaQuery } from "@zap-studio/react-hooks";
// or, equivalently:
// import { useIsMobile } from "@zap-studio/react-hooks/sensors/use-is-mobile";
// import { useMediaQuery } from "@zap-studio/react-hooks/sensors/use-media-query";
 
function Nav() {
  const isMobile = useIsMobile(); // true below 768px
  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
 
  return isMobile ? <MobileNav dark={prefersDark} /> : <DesktopNav dark={prefersDark} />;
}

Both hooks are SSR-safe: they return false until the client subscribes to matchMedia, so server-rendered and first-client-render output match — no hydration warnings. Every hook in this package follows the same rule: a browser-only API gets a safe, deterministic default during server rendering.

Browse Hooks by Category

Each category page lists every hook in it, with a runnable example and — for hooks that wrap a specific browser API — an MDN reference and browser support note.

Edit on GitHub