Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProSubscribe to any CSS media query and get a boolean that stays in sync, with a server default so hydration does not mismatch.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when JavaScript has to know a media feature: a pointer type, orientation, print, a custom width, hover support or display mode.
Do not use it for styling that CSS can do with @media or container queries. For Tailwind breakpoints use useBreakpoint.
import { useMediaQuery } from "@/hooks/use-media-query"const canHover = useMediaQuery("(hover: hover) and (pointer: fine)")
const isLandscape = useMediaQuery("(orientation: landscape)", {
defaultValue: true,
})useMediaQuery(query: string, options?): boolean
| Option | Type | Default | Description |
|---|---|---|---|
defaultValue | boolean | false | Value on the server and during hydration. |
After hydration the real match is returned and updated on change. Where matchMedia is missing the default is kept. Built on useSyncExternalStore, so it never tears.
A hook has no markup. Treat media queries as hints: do not remove features for a pointer or width, since a person can use a keyboard on a phone or a small window on a big screen.
The hook ships with renderHook tests (use-media-query.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.