---
title: Getting Started
description: Install @zap-studio/react-hooks.
type: package
package: "@zap-studio/react-hooks"
---

## Installation

<CodeGroup>

```bash npm
npm install @zap-studio/react-hooks
```

```bash yarn
yarn add @zap-studio/react-hooks
```

```bash pnpm
pnpm add @zap-studio/react-hooks
```

```bash bun
bun add @zap-studio/react-hooks
```

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

</CodeGroup>

## 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:

```tsx
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](https://developer.mozilla.org/) reference and browser support note.

- [Sensors](/react-hooks/sensors)
- [DOM / Element Interaction](/react-hooks/dom)
- [Input](/react-hooks/input)
- [Media](/react-hooks/media)
- [History & Navigation](/react-hooks/navigation)
- [Network](/react-hooks/network)
- [PWA](/react-hooks/pwa)
- [Commerce](/react-hooks/commerce)
- [Lifecycle](/react-hooks/lifecycle)
- [State](/react-hooks/state)
- [Debug / Observability](/react-hooks/debug)