Хук useBreakpointValue

Хук useBreakpointValue в библиотеке Chakra UI позволяет управлять значениями в зависимости от текущей точки останова (breakpoint). Он обеспечивает реактивное изменение значений при изменении ширины окна браузера, что особенно полезно для адаптивной верстки компонентов.

Синтаксис хука следующий:

import { useBreakpointValue } from "@chakra-ui/react";

const value = useBreakpointValue({
  base: "малый",
  sm: "малый экран",
  md: "средний экран",
  lg: "большой экран",
  xl: "очень большой экран"
});

Здесь объект передаётся с ключами, соответствующими стандартным точкам останова Chakra UI: base, sm, md, lg, xl. Хук возвращает значение, соответствующее текущей ширине окна.

Работа с точками останова

Chakra UI использует систему точек останова, основанную на мобильном подходе “mobile-first”. Стандартные значения точек останова:

  • base — все устройства, начиная с самого маленького экрана
  • sm — ≥ 30em (480px)
  • md — ≥ 48em (768px)
  • lg — ≥ 62em (992px)
  • xl — ≥ 80em (1280px)

При использовании useBreakpointValue значение автоматически выбирается в зависимости от ширины окна. Если текущая ширина находится между двумя точками останова, хук выбирает последнее определённое значение, меньшее или равное текущей ширине.

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

Изменение размера текста

import { Text, useBreakpointValue } from "@chakra-ui/react";

function ResponsiveText() {
  const fontSize = useBreakpointValue({ base: "sm", md: "lg", xl: "2xl" });

  return <Text fontSize={fontSize}>Адаптивный текст</Text>;
}

В данном примере текст будет маленьким на мобильных устройствах, средним на планшетах и большим на десктопах.

Адаптивная ориентация компонентов

import { Stack, Box, useBreakpointValue } from "@chakra-ui/react";

function ResponsiveStack() {
  const direction = useBreakpointValue({ base: "column", md: "row" });

  return (
    <Stack direction={direction} spacing={4}>
      <Box bg="blue.200" p={4}>Блок 1</Box>
      <Box bg="green.200" p={4}>Блок 2</Box>
    </Stack>
  );
}

Здесь элементы будут расположены вертикально на маленьких экранах и горизонтально на средних и больших экранах.

Динамическая работа с объектами и массивами

useBreakpointValue поддерживает не только строки и числа, но и сложные структуры:

const boxProps = useBreakpointValue({
  base: { w: "100%", h: "50px" },
  md: { w: "50%", h: "100px" }
});
<Box {...boxProps} bg="teal.300" />

Это позволяет полностью адаптировать внешний вид компонента под разные размеры экрана без создания лишних условий через if или media queries.

Особенности и рекомендации

  • Хук реагирует на изменение размера окна в реальном времени.
  • При использовании на сервере (SSR) результат может быть undefined, так как ширина окна недоступна. Рекомендуется проверять наличие значения или задавать fallback:
const fontSize = useBreakpointValue({ base: "sm", md: "lg" }) || "sm";
  • Можно использовать в комбинации с другими хуками Chakra UI, такими как useMediaQuery и useTheme, для более сложной адаптивной логики.
  • Оптимально использовать для свойств компонентов, а не для вычислений, требующих значительных ресурсов, чтобы избежать лишнего рендеринга.

Продвинутые сценарии

Комбинация с useTheme

import { useTheme, useBreakpointValue, Box } from "@chakra-ui/react";

function ThemedBox() {
  const theme = useTheme();
  const padding = useBreakpointValue({
    base: theme.space[2],
    md: theme.space[6]
  });

  return <Box p={padding} bg="gray.100">Контент</Box>;
}

Использование темы обеспечивает согласованность дизайна и позволяет легко управлять отступами, цветами и размерами в рамках системы Chakra UI.

Условное рендеринг на разных брейкпоинтах

const showSidebar = useBreakpointValue({ base: false, lg: true });

return (
  <div>
    {showSidebar && <Sidebar />}
    <MainContent />
  </div>
);

В этом примере боковая панель отображается только на больших экранах, упрощая интерфейс на мобильных устройствах.

Преимущества useBreakpointValue

  • Минимализм кода — нет необходимости писать громоздкие медиа-запросы.
  • Реактивность — значения автоматически обновляются при изменении ширины окна.
  • Интеграция с Chakra UI — хук использует те же точки останова, что и компоненты, обеспечивая консистентность интерфейса.
  • Гибкость — поддержка строк, чисел, объектов и массивов.

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

Оглавление