useMediaQuery

React-хук, который подписывается на CSS-медиазапрос и возвращает признак его соответствия. Построен на useSyncExternalStore для безопасности при SSR и совместимости с конкурентным режимом.

Установка

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @oracul/use-media-query
Копировать

Использование

Сокращённая запись брейкпоинтов

Используйте синтаксис вариантов Tailwind для сопоставления брейкпоинтов. TypeScript предоставляет полное автодополнение.

Copyimport { useMediaQuery } from "@/hooks/use-media-query";
 
// Min-width (breakpoint and above) — like md:
const isDesktop = useMediaQuery("md");
 
// Max-width (below breakpoint) — like max-md:
const isMobile = useMediaQuery("max-md");
 
// Range (between two breakpoints) — like md:max-lg:
const isTablet = useMediaQuery("md:max-lg");

Объектный API

Используйте объектную форму, когда нужно определить тип указателя или задать произвольные значения в пикселях.

Copy// Touch device detection
const isTouch = useMediaQuery({ pointer: "coarse" });
 
// Breakpoint + pointer combined
const isMobileTouch = useMediaQuery({ max: "md", pointer: "coarse" });
 
// Custom pixel values
const isNarrow = useMediaQuery({ max: 600 });

Произвольный медиазапрос

Передайте любую корректную строку CSS-медиазапроса как запасной вариант.

Copyconst prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");

Условный рендеринг

Основной сценарий использования — монтировать один компонент вместо другого в зависимости от области просмотра.

Copyfunction Layout() {
  const isDesktop = useMediaQuery("lg");
 
  return isDesktop ? <DesktopNav /> : <MobileNav />;
}

Брейкпоинты

Хук содержит статическую карту брейкпоинтов, которая должна совпадать с вашей конфигурацией Tailwind. Значения по умолчанию:

Если вы переопределяете брейкпоинты в @theme своего Tailwind CSS, обновите соответствующим образом константу BREAKPOINTS в хуке.

API

Copyfunction useMediaQuery(
  query: BreakpointQuery | MediaQueryInput | string
): boolean;

Строковые запросы

Объектные запросы

Возвращаемое значение

Возвращает boolean — true, когда медиазапрос соответствует, иначе false. Во время SSR возвращает false.

Примеры

Измените размер области просмотра, чтобы увидеть обновление значений в реальном времени.

Удобный экспорт

Хук также экспортирует useIsMobile для обратной совместимости с паттерном use-mobile из shadcn:

Copyimport { useIsMobile } from "@/hooks/use-media-query";
 
const isMobile = useIsMobile(); // equivalent to useMediaQuery("max-md")