useMediaQuery

A custom hook that subscribes to CSS media query changes.

Installation

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

Usage

import { useMediaQuery } from '@/hooks/use-media-query';

function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (     <div>       {isMobile ? <MobileLayout /> : <DesktopLayout />}     </div>   ); }

Examples

Check for mobile viewport

const isMobile = useMediaQuery('(max-width: 768px)');

Check for reduced motion preference

const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

Check for dark mode preference

const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');

Common breakpoints

const isSmall = useMediaQuery('(max-width: 640px)');   // sm
const isMedium = useMediaQuery('(max-width: 768px)');  // md
const isLarge = useMediaQuery('(max-width: 1024px)'); // lg
const isXLarge = useMediaQuery('(max-width: 1280px)'); // xl

API Reference

Parameters

Parameter	Type	Description
query	string	A valid CSS media query string

Returns

Type	Description
boolean	Whether the media query currently matches