usePress и обработка взаимодействий

Хук usePress из библиотеки React Aria предназначен для обработки взаимодействий пользователя с элементами интерфейса, которые можно «нажимать». В отличие от стандартных обработчиков клика в React, usePress обеспечивает унифицированное поведение для различных типов устройств — мышь, сенсорный экран и клавиатура, включая поддержку вспомогательных технологий.

Хук возвращает объект с набором свойств и функций, которые нужно применять к элементу через спред-оператор:

let { pressProps, isPressed } = usePress(props);
  • pressProps — объект с обработчиками событий, которые следует привязать к элементу.
  • isPressed — булево значение, показывающее, удерживается ли элемент в данный момент.

Основные параметры

Хук принимает объект настроек props, включающий ключевые параметры:

  • onPress — функция, вызываемая при успешном нажатии на элемент.
  • onPressStart — вызывается в момент начала взаимодействия (например, когда пользователь нажимает кнопку мыши или касается экрана).
  • onPressEnd — вызывается в момент окончания взаимодействия, перед срабатыванием onPress.
  • isDisabled — флаг, который блокирует обработку всех событий.
  • preventFocusOnPress — предотвращает перемещение фокуса на элемент при нажатии.

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

import { usePress } from '@react-aria/interactions';
import { useRef } from 'react';

function PressableButton({ onPress, children }) {
  let ref = useRef();
  let { pressProps, isPressed } = usePress({ onPress, ref });

  return (
    <button
      {...pressProps}
      ref={ref}
      style={{
        background: isPressed ? 'lightgray' : 'white',
        border: '1px solid black',
        padding: '8px 16px',
      }}
    >
      {children}
    </button>
  );
}

Работа с различными устройствами

usePress автоматически обрабатывает:

  • Мышь: клики и удерживание кнопки.
  • Сенсорный экран: касания и свайпы.
  • Клавиатура: клавиши Enter и Space для элементов, которые можно активировать.

Это позволяет создавать доступные интерфейсы без дополнительной логики для каждого типа ввода.

Управление состоянием нажатия

Переменная isPressed используется для визуального отображения состояния кнопки или любого другого интерактивного элемента. Например:

<div
  {...pressProps}
  ref={ref}
  style={{
    background: isPressed ? '#e0e0e0' : '#ffffff',
    transition: 'background 0.2s',
    cursor: 'pointer',
  }}
>
  Нажми меня
</div>

При удержании элемента цвет меняется, а при отпускании возвращается к исходному. Такой подход позволяет создавать эффект тактильной обратной связи, важный для сенсорных интерфейсов.

Сценарии применения

  1. Кнопки и ссылки: стандартные элементы интерфейса, где нужно обработать нажатие.
  2. Элементы с кастомным поведением: карточки, интерактивные панели или списки, где click не подходит из-за кастомной логики.
  3. Поддержка вспомогательных технологий: экранные читалки и устройства ввода обеспечивают корректное взаимодействие без дополнительных усилий.

Продвинутые возможности

  • onPressChange: позволяет отслеживать изменения состояния нажатия, например для анимации.
  • delayLongPress: задает задержку для распознавания длительного нажатия (аналогично onLongPress).
  • excludeFromTabOrder: предотвращает включение элемента в последовательность табуляции, сохраняя доступность для мыши и сенсорного ввода.

Пример с длительным нажатием:

let { pressProps, isPressed } = usePress({
  onPress: () => console.log('Короткое нажатие'),
  onLongPress: () => console.log('Длительное нажатие'),
  delayLongPress: 500
});

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

usePress часто комбинируется с:

  • useFocus — управление фокусом для элементов, поддерживающих клавиатуру.
  • useHover — визуальная обратная связь при наведении мыши.
  • useButton — создание полностью доступных кнопок с соблюдением стандартов ARIA.

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

Рекомендации по использованию

  • Всегда использовать ref для элемента, к которому применяются обработчики pressProps.
  • Не использовать одновременно стандартные обработчики onClick и onPress, чтобы избежать двойного срабатывания.
  • Применять стили и визуальные эффекты на основе isPressed для улучшения пользовательского опыта.
  • Использовать isDisabled для блокировки интерактивного элемента без удаления его из DOM, сохраняя доступность.

usePress обеспечивает консистентное и доступное управление нажатиями на элементы, делая интерфейс отзывчивым и предсказуемым на всех устройствах.

Оглавление