Полный список хуков

React Aria предоставляет набор хуков для управления доступностью интерфейсов в React. Эти хуки упрощают работу с ARIA-атрибутами, фокусом, клавиатурной навигацией и другими аспектами доступности.

useButton

Хук useButton используется для создания кнопок с поддержкой клавиатуры и ARIA-атрибутов.

Сигнатура:

const { buttonProps, isPressed } = useButton(props, ref);

Параметры:

  • props – объект с атрибутами кнопки (onPress, isDisabled, elementType и др.)
  • ref – ссылка на DOM-элемент кнопки

Возвращаемые значения:

  • buttonProps – набор атрибутов, которые нужно передать на элемент
  • isPressed – логическое состояние, указывающее на то, что кнопка нажата

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

function MyButton(props) {
  let ref = useRef();
  let { buttonProps, isPressed } = useButton(props, ref);
  
  return <button {...buttonProps} ref={ref}>{isPressed ? "Нажато" : "Нажми меня"}</button>;
}

useCheckbox

Хук для управления состоянием флажков с поддержкой ARIA.

Сигнатура:

const { inputProps } = useCheckbox(props, state);

Параметры:

  • props – объект с атрибутами чекбокса (isSelected, isDisabled, onChange)
  • state – состояние чекбокса, создаваемое через useToggleState

Возвращаемые значения:

  • inputProps – атрибуты, которые нужно передать на <input type="checkbox">

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

function CheckboxExample() {
  let state = useToggleState();
  let ref = useRef();
  let { inputProps } = useCheckbox({ isSelected: state.isSelected, onChange: state.setSelected }, ref);
  
  return <input {...inputProps} ref={ref} />;
}

useFocusRing

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

Сигнатура:

const { isFocusVisible, focusProps } = useFocusRing();

Возвращаемые значения:

  • isFocusVisible – boolean, указывающий, нужно ли показывать визуальный индикатор фокуса
  • focusProps – свойства для передачи на элемент для управления фокусом

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

function FocusableInput() {
  let { isFocusVisible, focusProps } = useFocusRing();
  
  return <input {...focusProps} style={{ outline: isFocusVisible ? '2px solid blue' : 'none' }} />;
}

useMenu и useMenuItem

Хуки для создания меню и элементов меню с поддержкой клавиатурной навигации и ARIA.

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

let state = useMenuState();
let ref = useRef();
let { menuProps } = useMenu({ autoFocus: true }, state, ref);

return (
  <ul {...menuProps} ref={ref}>
    {items.map(item => <MenuItem key={item.key} item={item} state={state} />)}
  </ul>
);

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

function MenuItem({ item, state }) {
  let ref = useRef();
  let { menuItemProps, isFocused, isSelected } = useMenuItem({ key: item.key }, state, ref);

  return (
    <li {...menuItemProps} ref={ref} style={{ background: isFocused ? 'lightgray' : 'transparent' }}>
      {item.name}
    </li>
  );
}

useSelect

Хук для создания селектов с поддержкой клавиатурной навигации и ARIA.

Сигнатура:

const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, ref);

Особенности:

  • Управляет открытием и закрытием списка
  • Поддерживает фокусировку и клавиатурную навигацию
  • Интегрируется с useListState для управления состоянием элементов

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

let state = useListState({ items });
let ref = useRef();
let { labelProps, triggerProps, valueProps, menuProps } = useSelect({ label: 'Выберите элемент' }, state, ref);

return (
  <div>
    <label {...labelProps}>Выберите элемент</label>
    <button {...triggerProps} ref={ref}>{state.selectedItem?.name || 'Выберите...'}</button>
    {state.isOpen && <ul {...menuProps}>{state.collection.map(item => <li key={item.key}>{item.rendered}</li>)}</ul>}
  </div>
);

useSlider

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

Основные свойства:

  • minValue, maxValue – диапазон значений
  • value, onChange – текущее значение и обработчик изменения
  • orientation – вертикальная или горизонтальная ориентация

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

let state = useSliderState({ minValue: 0, maxValue: 100, value: 50 });
let ref = useRef();
let { trackProps, thumbProps } = useSlider({ orientation: 'horizontal' }, state, ref);

return (
  <div {...trackProps} ref={ref} style={{ width: '200px', height: '4px', background: 'gray' }}>
    <div {...thumbProps} style={{ left: `${state.value}%`, width: '16px', height: '16px', background: 'blue', position: 'absolute' }} />
  </div>
);

useToggleState и useListState

Эти хуки обеспечивают управление состоянием для интерактивных компонентов:

  • useToggleState – для переключателей, чекбоксов, кнопок включения/выключения
  • useListState – для списков и коллекций с выбором элементов

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

let toggle = useToggleState({ defaultSelected: false });
toggle.setSelected(!toggle.isSelected);

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

let state = useListState({ items });
state.selectedKeys.add('item1');

useFocus и useHover

  • useFocus – управляет событиями фокуса и blur
  • useHover – управляет состоянием наведения мыши, полезно для всплывающих подсказок и интерактивных элементов

Пример useHover:

let { hoverProps, isHovered } = useHover({});
return <div {...hoverProps} style={{ background: isHovered ? 'lightblue' : 'white' }}>Наведи на меня</div>;

useDialog

Хук для создания модальных диалогов с поддержкой ARIA и управления фокусом.

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

let ref = useRef();
let { dialogProps, titleProps } = useDialog({}, ref);

return (
  <div {...dialogProps} ref={ref} role="dialog" aria-modal="true">
    <h2 {...titleProps}>Заголовок диалога</h2>
    <p>Содержимое диалога</p>
  </div>
);

useTooltip

Хук для создания подсказок с управлением ARIA и позицией.

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

let { tooltipProps, triggerProps } = useTooltip({ description: 'Это подсказка' });

return (
  <div>
    <button {...triggerProps}>Наведи на меня</button>
    <div {...tooltipProps}>Это подсказка</div>
  </div>
);

Эти хуки формируют базовый каркас React Aria и обеспечивают полную интеграцию с ARIA, клавиатурной навигацией, фокусом и состоянием компонентов. Их правильное применение позволяет создавать доступные интерфейсы без прямой ручной работы с атрибутами ARIA.

Оглавление