Группировка инструментов

Radix UI представляет собой набор низкоуровневых, полностью управляемых React-компонентов для построения интерфейсов. Центральная идея заключается в композиции инструментов, позволяющей создавать сложные UI-элементы без потери контроля над поведением и стилями. Каждый компонент Radix UI построен на принципах контролируемого и неконтролируемого состояния, что даёт гибкость при интеграции с различными библиотеками стилей или системами управления состоянием.

Контролируемые и неконтролируемые компоненты

Компоненты Radix UI можно использовать в двух режимах:

  • Контролируемый режим – родитель управляет состоянием компонента через пропсы value или open. Такой подход удобен для синхронизации с глобальным состоянием приложения, например Redux или Zustand.
  • Неконтролируемый режим – компонент сам управляет своим внутренним состоянием через defaultValue или defaultOpen. Этот режим проще для локальных, изолированных интерфейсов.

Пример использования контролируемого компонента Accordion:

import * as Accordion from '@radix-ui/react-accordion';
import { useState } from 'react';

function ControlledAccordion() {
  const [value, setValue] = useState('item-1');

  return (
    <Accordion.Root type="single" value={value} onValueCha nge={setValue}>
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>Секция 1</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Контент первой секции</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger>Секция 2</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>Контент второй секции</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Группировка инструментов: принципы

Группировка компонентов в Radix UI строится вокруг Root-компонента, который определяет контекст для всех вложенных элементов. Принципы:

  1. Явная структура – дочерние компоненты получают доступ к контексту Root, что упрощает управление состоянием и взаимодействие.
  2. Декомпозиция – каждый инструмент, например Toggle, Radio, Checkbox, представлен набором вспомогательных компонентов: Root, Item, Trigger, Indicator.
  3. Контекст и провайдеры – Root создает внутренний контекст, а дочерние компоненты подписываются на него, что минимизирует необходимость прокидывать пропсы вручную.

Пример группировки Checkbox.Group:

import * as Checkbox from '@radix-ui/react-checkbox';

function CheckboxGroupExample() {
  return (
    <Checkbox.Root>
      <Checkbox.Item value="apple">
        <Checkbox.Indicator>✓</Checkbox.Indicator>
        Яблоко
      </Checkbox.Item>
      <Checkbox.Item value="banana">
        <Checkbox.Indicator>✓</Checkbox.Indicator>
        Банан
      </Checkbox.Item>
    </Checkbox.Root>
  );
}

Работа с типами групп: single vs multiple

Компоненты Radix UI, поддерживающие множественный выбор, позволяют задавать type у Root-компонента:

  • single – разрешён только один активный элемент. Применяется в RadioGroup, Accordion.
  • multiple – возможно несколько активных элементов. Применяется в CheckboxGroup.
<Accordion.Root type="multiple">
  ...
</Accordion.Root>

Индикаторы и триггеры

Вложенные компоненты Indicator и Trigger обеспечивают визуальную и интерактивную связь с состоянием Root. Например, Accordion.Trigger реагирует на open состояние Root, автоматически переключая видимость контента. Это создаёт единый источник правды для состояния интерфейса.

<Accordion.Trigger>
  {({ open }) => open ? 'Скрыть' : 'Показать'}
</Accordion.Trigger>

Стилизация и интеграция

Radix UI не навязывает стили. Для оформления используются классы CSS или сторонние библиотеки вроде Tailwind CSS, Stitches, Emotion. Подход с группировкой компонентов облегчает применение единого стиля к набору элементов через общие классы или контекст.

<Accordion.Item className="accordion-item">
  <Accordion.Trigger className="accordion-trigger">
    Заголовок
  </Accordion.Trigger>
  <Accordion.Content className="accordion-content">
    Контент
  </Accordion.Content>
</Accordion.Item>

Композиция сложных интерфейсов

Группировка компонентов Radix UI позволяет строить комплексные интерфейсы:

  • Множественные аккордеоны с различными конфигурациями.
  • Сложные формы с комбинированными Checkbox и Radio.
  • Селекторы с кастомными индикаторами и триггерами.

Важно сохранять единую иерархию Root → Items → Indicators, чтобы состояние оставалось предсказуемым.

Практические рекомендации

  • Использовать type у Root для контроля поведения группы.
  • Поддерживать явное разделение Trigger/Content/Indicator для предсказуемости.
  • Применять контексты и провайдеры для передачи данных между компонентами, избегая избыточного проп-дриллинга.
  • В случае кастомных элементов следить за синхронизацией состояния через onValueChange и value или defaultValue.
  • Для сложных интерфейсов объединять несколько групп через общий контекст, сохраняя управление состоянием на верхнем уровне.

Грамотная группировка инструментов в Radix UI обеспечивает масштабируемость интерфейсов, предсказуемое управление состоянием и удобную стилизацию, что особенно важно для крупных проектов с динамическими и интерактивными элементами.

Оглавление