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

useMediaQuery — это хук, предоставляемый библиотекой MUI (Material-UI), который позволяет реализовать адаптивный дизайн компонентов на основе условий медиа-запросов. Он возвращает булево значение, которое отражает, соответствует ли текущее состояние окна заданному условию. Этот инструмент особенно полезен для изменения структуры интерфейса и стилей в зависимости от ширины экрана, ориентации устройства или других характеристик среды.

import { useMediaQuery } from '@mui/material';

Синтаксис и базовое использование

Хук принимает в качестве аргумента строку медиа-запроса или функцию, возвращающую строку. Простейший пример:

const isLargeScreen = useMediaQuery('(min-width:1200px)');

В этом случае isLargeScreen будет true, если ширина окна больше или равна 1200 пикселей.

Ключевой момент: строка медиа-запроса должна быть валидной CSS-конструкцией, поддерживаемой в window.matchMedia.

Использование темы MUI с useMediaQuery

Для интеграции с темой MUI удобно использовать объект theme и предопределенные брейкпоинты:

import { useTheme } from '@mui/material/styles';

const theme = useTheme();
const isMediumUp = useMediaQuery(theme.breakpoints.up('md'));

Здесь theme.breakpoints.up('md') соответствует условию, когда ширина экрана равна или больше среднего брейкпоинта (md).

Преимущества использования брейкпоинтов темы:

  • Согласованность с остальными компонентами MUI.
  • Возможность легко менять брейкпоинты централизованно.
  • Упрощение поддержки адаптивного дизайна при расширении проекта.

Динамическая реакция на изменение размера окна

useMediaQuery автоматически реагирует на изменения размера окна, что позволяет обновлять интерфейс без дополнительных слушателей событий:

const isSmallScreen = useMediaQuery('(max-width:600px)');

return (
  <div>
    {isSmallScreen ? <MobileMenu /> : <DesktopMenu />}
  </div>
);

В этом примере компонент меню меняется в зависимости от ширины окна, без ручного контроля событий resize.

Оптимизация рендеринга с useMediaQuery

По умолчанию useMediaQuery использует серверный рендеринг (SSR) как false. Для предотвращения различий между сервером и клиентом можно передать опцию ssrMatchMedia:

const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'), {
  noSsr: false,
});

Пояснение:

  • noSsr: true — хук не учитывает серверный рендеринг.
  • noSsr: false — используется для корректного рендеринга на сервере, что важно для Next.js и других SSR-фреймворков.

Использование функций внутри useMediaQuery

Можно передавать функцию, которая возвращает медиа-запрос, используя тему или другие динамические значения:

const isPortrait = useMediaQuery(theme => theme.breakpoints.down('sm'));

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

Совмещение нескольких условий

Для реализации сложной адаптивности можно объединять несколько вызовов useMediaQuery:

const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isLandscape = useMediaQuery('(orientation: landscape)');

return (
  <div>
    {isMobile && isLandscape ? <LandscapeMobileLayout /> : <DefaultLayout />}
  </div>
);

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

Практические сценарии использования

  1. Переключение навигационного меню: отображение гамбургер-меню на маленьких экранах и горизонтального меню на больших.
  2. Изменение стилей компонентов: увеличение шрифтов, изменение отступов и размеров карточек в зависимости от ширины окна.
  3. Адаптация сетки: управление количеством колонок Grid или Masonry в зависимости от брейкпоинтов.
  4. Скрытие/показ определённых элементов: кнопки, баннеры, боковые панели или дополнительные блоки.

Заключение по работе с useMediaQuery

useMediaQuery является мощным инструментом для создания адаптивных интерфейсов на React с MUI. Его использование вместе с темой и брейкпоинтами обеспечивает гибкость, масштабируемость и соответствие принципам Material Design. Поддержка SSR и динамических функций делает его подходящим для любых современных приложений, включая проекты с серверной генерацией.

Хорошая практика — комбинировать useMediaQuery с Grid, Box и другими компонентами MUI для построения полностью адаптивных макетов.

Оглавление