Overview

useMediaQuery is part of the @usefy ecosystem — a collection of production-ready, TypeScript-first, SSR-safe React hooks. Match CSS media queries with matchMedia and SSR support.

Features

• Live updates — re-renders when the query starts/stops matching
• SSR-safe — configurable default + deferred initialization
• Any query — breakpoints, orientation, prefers-*, etc.
• TypeScript-first — full type inference and exported types
• Tiny & tree-shakeable — zero dependencies, published as its own package

Installation

# npm
npm install @usefy/use-media-query

# yarn
yarn add @usefy/use-media-query

# pnpm
pnpm add @usefy/use-media-query

Requires React 18 or 19 (peerDependencies: "react": "^18.0.0 || ^19.0.0").

Quick Start

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

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

API

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

Testing

📊 View Detailed Coverage Report (GitHub Pages) — 12 tests, 100% statement coverage.

License

MIT © mirunamu

This package is part of the usefy monorepo.