Интеграция с другими компонентами

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

Совместная работа с менеджерами состояния

Radix UI не навязывает внутреннее состояние, что делает его идеально совместимым с популярными менеджерами состояния, такими как Redux, Zustand, Recoil или MobX. Каждый компонент предоставляет контролируемый и неконтролируемый режим работы через пропсы value и onValueChange, что позволяет:

  • Подключать состояние к глобальному стору.
  • Синхронизировать выбранные значения между разными компонентами.
  • Управлять состоянием компонентов динамически, например, открытием модальных окон или переключением вкладок.

Пример интеграции с Zustand:

import { create } from 'zustand';
import * as Tabs from '@radix-ui/react-tabs';

const useStore = create(set => ({
  activeTab: 'tab1',
  setActiveTab: (tab) => set({ activeTab: tab }),
}));

function App() {
  const { activeTab, setActiveTab } = useStore();
  
  return (
    <Tabs.Root value={activeTab} onValueCha nge={setActiveTab}>
      <Tabs.List>
        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="tab1">Content 1</Tabs.Content>
      <Tabs.Content value="tab2">Content 2</Tabs.Content>
    </Tabs.Root>
  );
}

Ключевой момент: состояние управляется снаружи, что упрощает синхронизацию с другими компонентами приложения.

Интеграция с UI-фреймворками

Radix UI ориентирован на стилизацию через внешние CSS или CSS-in-JS. Компоненты можно легко сочетать с библиотеками вроде Tailwind CSS, Stitches, Emotion или Styled Components.

Особенности интеграции с Tailwind CSS:

  • Использование пропа className для стилизации элементов.
  • Управление состояниями через псевдоклассы и утилиты Tailwind.
  • Поддержка data-state, data-disabled и других атрибутов Radix для динамической стилизации.

Пример стилизации кнопки Radix через Tailwind:

import * as Switch from '@radix-ui/react-switch';

function ToggleSwitch() {
  return (
    <Switch.Root className="relative w-12 h-6 bg-gray-200 rounded-full">
      <Switch.Thumb className="block w-6 h-6 bg-white rounded-full shadow-md transition-transform data-[state=checked]:translate-x-6" />
    </Switch.Root>
  );
}

Использование data-[state=checked] обеспечивает точное отражение внутреннего состояния компонента без необходимости дополнительного JS-кода.

Встраивание в сложные интерфейсы

Radix UI предоставляет «building block» подход, позволяющий комбинировать компоненты для сложных интерфейсов:

  1. Модальные окна и диалоги: Dialog можно интегрировать с формами из React Hook Form, при этом сохранение состояния ввода и валидация остаются внешними.
  2. Меню и тултипы: DropdownMenu и Tooltip поддерживают управление фокусом и открытие по событиям, что упрощает совместную работу с кастомными ховер-компонентами.
  3. Контролы ввода: Checkbox, RadioGroup, Slider можно полностью контролировать через внешние стейты или формы, что упрощает их комбинирование с библиотеками валидации или визуализации данных.

Пример интеграции Dialog с React Hook Form:

import { useForm } from 'react-hook-form';
import * as Dialog from '@radix-ui/react-dialog';

function FormDialog() {
  const { register, handleSubmit } = useForm();
  
  const onSub mit = data => console.log(data);

  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Form</Dialog.Trigger>
      <Dialog.Content className="p-6 bg-white rounded shadow-lg">
        <form onSub mit={handleSubmit(onSubmit)}>
          <input {...register('name')} placeholder="Name" />
          <button type="submit">Submit</button>
        </form>
      </Dialog.Content>
    </Dialog.Root>
  );
}

Важно: управление открытием диалога остается отдельным, а форма полностью интегрируется с внешним менеджером состояния.

Обработка событий и коллбеков

Radix UI предоставляет обширную систему коллбеков:

  • onValueChange для контролируемых компонентов.
  • onOpenChange для модальных и раскрывающихся элементов.
  • onFocus, onBlur и другие стандартные события React.

Это позволяет:

  • Реализовать кастомные анимации и переходы с помощью библиотек вроде Framer Motion.
  • Передавать данные между разными компонентами при изменении состояния.
  • Отслеживать пользовательское взаимодействие без нарушения стандартов доступности.

Синхронизация с анимациями и переходами

Компоненты Radix UI совместимы с библиотеками анимации, так как они предоставляют ref и позволяют контролировать рендеринг через состояния. Например, интеграция с Framer Motion позволяет:

  • Плавно анимировать открытие/закрытие Accordion или DropdownMenu.
  • Подключать кастомные трансформации элементов при изменении состояния data-state.
  • Сохранять управляемость компонентов, не ломая доступность.

Пример с анимацией Accordion:

import { motion, AnimatePresence } from 'framer-motion';
import * as Accordion from '@radix-ui/react-accordion';

function AnimatedAccordion() {
  return (
    <Accordion.Root type="single" collapsible>
      <Accordion.Item value="item1">
        <Accordion.Trigger>Section 1</Accordion.Trigger>
        <AnimatePresence>
          <Accordion.Content asChild>
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
            >
              Content for section 1
            </motion.div>
          </Accordion.Content>
        </AnimatePresence>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Использование с библиотеками визуализации данных

Radix UI можно использовать в интерфейсах с графиками и таблицами данных (например, Recharts, React Table):

  • Компоненты Radix обеспечивают доступность и интерактивность элементов управления (фильтры, сортировка, переключатели).
  • Атрибуты состояния (data-state, data-disabled) позволяют интегрировать визуальные индикаторы прямо с компонентами визуализации.
  • Возможна динамическая синхронизация выбора данных с внешними компонентами через состояние.

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

  • Использовать контролируемые компоненты при необходимости интеграции с внешним состоянием.
  • Подключать className и data-state для гибкой стилизации и анимаций.
  • Не нарушать фокус и клавиатурную доступность при обертках и кастомных визуальных компонентах.
  • Комбинировать с анимационными библиотеками через asChild и ref, чтобы сохранять полноценное управление компонентом.

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

Оглавление