Хуки для состояния

React Aria предоставляет мощный набор хуков для управления состоянием компонентов с фокусом на доступность (accessibility) и совместимость с ARIA-спецификациями. Хуки состояния позволяют создавать интерактивные элементы интерфейса, такие как кнопки, чекбоксы, переключатели, вкладки и модальные окна, с полностью контролируемым поведением и без необходимости вручную писать сложную логику управления состоянием.

useToggleState

Хук useToggleState используется для управления булевым состоянием компонентов, таких как переключатели и чекбоксы.

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

import { useToggleState } from '@react-stately/toggle';

function SwitchExample() {
  let state = useToggleState({ defaultSelected: false });

  return (
    <button onCl ick={() => state.toggle()} aria-pressed={state.isSelected}>
      {state.isSelected ? 'Включено' : 'Выключено'}
    </button>
  );
}

Ключевые моменты:

  • defaultSelected — начальное состояние компонента.
  • isSelected — текущее состояние (true/false).
  • toggle() — метод для переключения состояния.

Хук полностью управляет внутренним состоянием и корректно обновляет ARIA-атрибуты.

useListState

Хук useListState используется для управления состоянием списков, включая выделение элементов и фильтрацию.

Пример:

import { useListState } from '@react-stately/list';

function ListExample({ items }) {
  let state = useListState({ items, selectionMode: 'single' });

  return (
    <ul>
      {state.collection.map(item => (
        <li
          key={item.key}
          onCl ick={() => state.select(item.key)}
          aria-selected={state.selectionManager.isSelected(item.key)}
        >
          {item.rendered}
        </li>
      ))}
    </ul>
  );
}

Ключевые моменты:

  • selectionMode может быть 'single' или 'multiple'.
  • state.selectionManager управляет выделением элементов.
  • Поддержка динамических коллекций через state.collection.

useMenuTriggerState

Хук для управления состоянием выпадающих меню и контекстных меню.

Пример:

import { useMenuTriggerState } from '@react-stately/menu';

function MenuButtonExample() {
  let state = useMenuTriggerState({});

  return (
    <>
      <button onCl ick={state.open}>
        Открыть меню
      </button>
      {state.isOpen && (
        <ul>
          <li>Пункт 1</li>
          <li>Пункт 2</li>
        </ul>
      )}
    </>
  );
}

Ключевые моменты:

  • isOpen — состояние открытия меню.
  • Методы open() и close() управляют видимостью.
  • Интеграция с ARIA-ролями для меню осуществляется автоматически при использовании useMenu и useMenuTrigger.

useCheckboxState

Хук useCheckboxState упрощает создание контролируемых и неконтролируемых чекбоксов.

Пример:

import { useCheckboxState } from '@react-stately/checkbox';

function CheckboxExample() {
  let state = useCheckboxState({ defaultSelected: false });

  return (
    <input
      type="checkbox"
      checked={state.isSelected}
      onCha nge={state.toggle}
    />
  );
}

Ключевые моменты:

  • Автоматическое управление состоянием выделения.
  • Поддержка indeterminate состояния для частично выбранных групп чекбоксов.

useTabListState и useTabState

Хуки для управления вкладками и состоянием выбранной вкладки.

Пример:

import { useTabListState } from '@react-stately/tabs';

function TabsExample({ tabs }) {
  let state = useTabListState({ selectedKey: tabs[0].key, tabs });

  return (
    <div role="tablist">
      {tabs.map(tab => (
        <button
          key={tab.key}
          role="tab"
          aria-selected={state.selectedKey === tab.key}
          onCl ick={() => state.setSelectedKey(tab.key)}
        >
          {tab.name}
        </button>
      ))}
      <div role="tabpanel">
        {tabs.find(tab => tab.key === state.selectedKey).content}
      </div>
    </div>
  );
}

Ключевые моменты:

  • selectedKey хранит текущую выбранную вкладку.
  • setSelectedKey изменяет выбор.
  • Хук управляет фокусом и доступностью, следуя рекомендациям ARIA.

useOverlayTriggerState

Используется для управления модальными окнами, всплывающими подсказками и оверлеями.

Пример:

import { useOverlayTriggerState } from '@react-stately/overlays';

function ModalExample() {
  let state = useOverlayTriggerState({});

  return (
    <>
      <button onCl ick={state.open}>Открыть модальное окно</button>
      {state.isOpen && (
        <div role="dialog">
          <p>Содержимое модального окна</p>
          <button onCl ick={state.close}>Закрыть</button>
        </div>
      )}
    </>
  );
}

Ключевые моменты:

  • isOpen и методы open()/close() управляют видимостью.
  • Поддержка анимаций и взаимодействия с клавиатурой встроена в сочетании с useOverlay.

Общие рекомендации по работе с хуками состояния

  • Хуки React Aria обеспечивают отделение состояния от разметки, что упрощает поддержку и тестирование.
  • Методы состояния всегда синхронизированы с ARIA-атрибутами, что исключает необходимость ручного добавления aria-*.
  • Комбинация хуков, таких как useListState + useMenuTriggerState, позволяет создавать сложные компоненты, такие как многоуровневые меню или вкладочные панели с динамическим содержимым.
  • Большинство хуков поддерживает контролируемый и неконтролируемый режим, что позволяет использовать их как в простых, так и в сложных сценариях.

Хуки состояния React Aria делают управление интерактивными компонентами предсказуемым, безопасным с точки зрения доступности и легким для интеграции в любые UI-системы.

Оглавление