Getting Started

Install @zap-studio/react-hooks.

Installation

npm install @zap-studio/react-hooks

yarn add @zap-studio/react-hooks

pnpm add @zap-studio/react-hooks

bun add @zap-studio/react-hooks

deno add jsr:@zap-studio/react-hooks

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.