useLongPress для долгого нажатия

useLongPress — это хук из библиотеки React Aria, предназначенный для обработки событий долгого нажатия на элементы интерфейса. Он особенно полезен для мобильных устройств и сенсорных экранов, где классическое событие onClick может быть недостаточным для реализации контекстных меню, специальных действий или drag-and-drop взаимодействий.

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

Импорт и базовое использование

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

function Button() {
  const { longPressProps } = useLongPress({
    onLongPress: () => console.log('Долгое нажатие'),
    onLongPressEnd: () => console.log('Нажатие завершено'),
    delay: 500 // время в миллисекундах для срабатывания долгого нажатия
  });

  return <button {...longPressProps}>Нажми и держи</button>;
}

Ключевые параметры:

  • onLongPress – вызывается после того, как пользователь удерживает элемент указанное время.
  • onLongPressEnd – вызывается при отпускании элемента после долгого нажатия.
  • delay – время в миллисекундах, определяющее длительность, после которой считается долгим нажатием (по умолчанию 500 мс).
  • isDisabled – булев флаг, который отключает обработку долгого нажатия.

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

Настройка длительности нажатия

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

const { longPressProps } = useLongPress({
  onLongPress: () => alert('Долгое нажатие с задержкой 1000 мс'),
  delay: 1000
});

Здесь действие срабатывает только если пользователь удерживает элемент более 1 секунды.

Отключение хука

Иногда требуется временно блокировать возможность долгого нажатия:

const { longPressProps } = useLongPress({
  onLongPress: handleLongPress,
  isDisabled: true
});

При isDisabled: true хук не будет отслеживать события, что позволяет динамически управлять интерактивностью компонентов.

Обработка разных устройств

useLongPress автоматически обрабатывает события мыши, касания и клавиатуры. Это позволяет использовать один и тот же компонент на десктопе и мобильных устройствах без дополнительных проверок:

  • Мышь: mousedown → mouseup
  • Сенсорный экран: touchstart → touchend
  • Клавиатура: keydown → keyup

Такой подход обеспечивает единообразное поведение на всех устройствах.

Комбинация с другими хуками React Aria

useLongPress часто используется вместе с usePress, когда нужно различать короткое и долгое нажатие:

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

function InteractiveButton() {
  const { pressProps } = usePress({
    onPress: () => console.log('Короткое нажатие')
  });

  const { longPressProps } = useLongPress({
    onLongPress: () => console.log('Долгое нажатие')
  });

  const combinedProps = { ...pressProps, ...longPressProps };

  return <button {...combinedProps}>Нажми меня</button>;
}

Особенность: свойства можно объединять, но важно, чтобы они не конфликтовали, иначе одно событие может блокировать другое.

Практические советы по использованию

  1. Визуальная обратная связь При долгом нажатии полезно менять стиль кнопки или отображать индикатор прогресса, чтобы пользователь понимал, что действие распознаётся.

  2. Контекстные меню Долгое нажатие удобно использовать для вызова меню с дополнительными опциями на мобильных устройствах, заменяя правый клик мышью.

  3. Drag-and-drop Хук может выступать триггером для начала перетаскивания объекта, после того как пользователь удерживал элемент необходимое время.

  4. Оптимизация UX Выбирать оптимальное значение delay важно для того, чтобы действие чувствовалось естественно: слишком короткое – случайные срабатывания, слишком длинное – пользователи могут не дождаться реакции.

Полный пример с визуальным эффектом

import { useLongPress } from '@react-aria/interactions';
import { useState } from 'react';

function LongPressButton() {
  const [active, setActive] = useState(false);

  const { longPressProps } = useLongPress({
    onLongPress: () => setActive(true),
    onLongPressEnd: () => setActive(false),
    delay: 700
  });

  return (
    <button
      {...longPressProps}
      style={{
        backgroundColor: active ? 'red' : 'blue',
        color: 'white',
        padding: '12px 24px',
        fontSize: '16px',
        border: 'none',
        borderRadius: '6px',
        cursor: 'pointer'
      }}
    >
      {active ? 'Удерживается!' : 'Нажми и держи'}
    </button>
  );
}

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

useLongPress обеспечивает простое и кроссплатформенное управление долгими нажатиями, позволяя создавать интуитивно понятные интерфейсы на React, адаптированные для всех типов устройств. Он является частью экосистемы React Aria, которая фокусируется на доступности и согласованности взаимодействий.

Оглавление