PWA UIv0.1
Documentation
Docs / Hooks / useMediaQuery

Hook

useMediaQuery

useMediaQuery keeps responsive React behavior aligned with the browser's media-query engine while allowing callers to choose a predictable server-rendered default.

Preview

(max-width: 47.999rem)Does not match

Resize the window across 48rem to see the result change.

Installation

bash
pnpm dlx shadcn@latest add https://pwaui.com/r/use-media-query.json

Usage

tsx
"use client"
import { useMediaQuery } from "@/hooks/use-media-query"
export function ResponsiveLabel() {  const isCompact = useMediaQuery("(max-width: 47.999rem)")
  return <p>{isCompact ? "Compact" : "Wide"} layout</p>}

Returns

boolean
Whether the supplied media query currently matches.

Behavior notes

  • The optional second argument controls the value used before the client effect runs.
  • The hook responds when the media query begins or stops matching.
  • Use the same breakpoint string in CSS and JavaScript when behavior and layout must change together.