useToggleState для переключателей

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

Импорт и подключение

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

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

Основной синтаксис и возвращаемое значение

const toggle = useToggleState({ defaultSelected: false });

Параметры:

defaultSelected — начальное состояние переключателя (true или false). По умолчанию false.
isSelected — можно передать для контролируемого компонента; если указано, состояние будет полностью контролироваться извне.

Возвращаемый объект содержит ключевые свойства и методы:

isSelected — текущее состояние переключателя (true/false).
setSelected(value: boolean) — функция для явного задания состояния.
toggle() — функция для переключения состояния.
reset() — сброс к начальному значению.

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

function ToggleExample() {
  const toggle = useToggleState({ defaultSelected: false });

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

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

useToggleState поддерживает оба подхода:

Неконтролируемый компонент — состояние управляется хукoм самостоятельно:

const toggle = useToggleState({ defaultSelected: true });

Контролируемый компонент — состояние управляется извне через isSelected и onChange:

function ControlledToggle({ selected, onChange }) {
  const toggle = useToggleState({ isSelected: selected });

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

В этом случае useToggleState используется как вспомогательный объект для удобного доступа к методам toggle() и setSelected().

Поддержка доступности (ARIA)

React Aria автоматизирует работу с ARIA-атрибутами. Для переключателей важно использовать aria-pressed или aria-checked в зависимости от типа компонента.

Пример для кнопки-переключателя:

function AccessibleToggle() {
  const toggle = useToggleState({ defaultSelected: false });

  return (
    <button
      role="switch"
      aria-checked={toggle.isSelected}
      onCl ick={toggle.toggle}
    >
      {toggle.isSelected ? 'Активен' : 'Неактивен'}
    </button>
  );
}

Здесь role="switch" указывает экранным ридерам, что кнопка ведет себя как переключатель, а aria-checked синхронизируется с состоянием.

Интеграция с другими хуками React Aria

useToggleState хорошо сочетается с хуками из React Aria:

useButton — для стилизованных кнопок и обработки событий клавиатуры.
useCheckbox — для реализации кастомных чекбоксов.
useSwitch — для реализации переключателей с доступностью.

Пример с useButton:

import { useButton } from '@react-aria/button';

function SwitchButton() {
  const toggle = useToggleState({ defaultSelected: false });
  const ref = React.useRef();
  const { buttonProps } = useButton({ onPress: toggle.toggle }, ref);

  return (
    <button {...buttonProps} ref={ref} aria-pressed={toggle.isSelected}>
      {toggle.isSelected ? 'Вкл' : 'Выкл'}
    </button>
  );
}

Использование useButton обеспечивает корректную обработку клавиатурных событий (Enter, Space) и фокусировки.

Расширенные возможности

Сброс состояния: метод reset() возвращает переключатель в исходное состояние.
Программное управление: методы setSelected(value) и toggle() позволяют изменять состояние извне.
Множественные переключатели: можно создавать массив состояний для группы toggle-компонентов.

Пример с группой:

const toggles = [
  useToggleState({ defaultSelected: false }),
  useToggleState({ defaultSelected: true }),
];

return (
  <>
    {toggles.map((t, index) => (
      <button key={index} onCl ick={t.toggle}>
        {t.isSelected ? 'Вкл' : 'Выкл'}
      </button>
    ))}
  </>
);