Skip to content
usefy

useMediaQuery

Browser & device

Match CSS media queries with matchMedia and SSR support

Install

$ npm install @usefy/use-media-query

Quick start

useMediaQuery.tsx
import { useMediaQuery } from "@usefy/use-media-query";

const isDesktop = useMediaQuery("(min-width: 1024px)");
return isDesktop ? <DesktopNav /> : <MobileNav />;

API reference

useMediaQuery(query, options?): booleanoptions: defaultValue (SSR value, default false), initializeWithValue (read eagerly on the first client render, default true).

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

More in browser & device