# useMediaQuery

Tracks whether a CSS media query matches, and re-renders when it changes.

Renders `serverValue` on the server and during hydration, then switches to the real value with no hydration mismatch. Concurrent-safe: every component reads the same value in one render.

## Import

```ts
import { useMediaQuery } from '@vincent.ri/react-tils'
// or only this hook
import { useMediaQuery } from '@vincent.ri/react-tils/useMediaQuery'
```

## Usage

```ts
const isWide = useMediaQuery('(min-width: 768px)')
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
// Mobile-first site: assume narrow on the server.
const isDesktop = useMediaQuery('(min-width: 1024px)', false)
```

## When to use it

JS logic depends on viewport size, `prefers-color-scheme`, `prefers-reduced-motion`, pointer type, or orientation.

## When not to

Only styling changes. Use a CSS `@media` rule instead, which needs no JS and never flashes.

## API

```ts
function useMediaQuery(query: string, serverValue?: boolean): boolean
```

| Parameter | Description |
| --- | --- |
| `query` | Any CSS media query, e.g. `'(min-width: 768px)'`. |
| `serverValue` | Value on the server and during hydration. Pick the value most visitors will have, to minimize the switch after hydration. Default `false`. |

## Browser support

Works in all modern browsers.

## Coming from another library?

Other libraries call this `useMedia`, `useBreakpoint`, `useResponsive`.

---

126 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useMediaQuery.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useMediaQuery/
Next: [useWindowSize](https://vincentri.github.io/react-tils/hooks/useWindowSize.md)