Component UI
useMediaQuerybrowser

useMediaQuery

NewSSR SAFE

Listens for media query changes and returns a boolean.

$ pnpm dlx shadcn@latest add @byphongphan/use-media-query
Requires @byphongphan in components.json
browser
Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-media-query
Requires @byphongphan in components.json

Usage

import { useMediaQuery } from "@/shared/hooks"
export function ResponsiveLayout() {  const isDesktop = useMediaQuery("(min-width: 1024px)")  const isMobile = useMediaQuery("max-sm")
  return (    <div>      {isDesktop ? <DesktopNavigation /> : <MobileNavigation />}    </div>  )}

Props & Parameters

ParamTypeDefaultDescription
querystring | BreakpointQuery | MediaQueryInput—Media query string e.g. "(min-width: 1024px)" or breakpoint token like "max-md".

Returns

ReturnTypeDescription
matchesbooleantrue if current viewport matches the media query, false otherwise. Safely synchronizes on SSR.

Command Palette

Quick search and commands navigation