useMove для движения

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

Основные возможности useMove

  • Отслеживание позиции: предоставляет координаты x и y элемента относительно исходной точки начала движения.
  • Поддержка устройств ввода: работает с мышью, сенсорным экраном и клавиатурой (через специальные адаптеры).
  • Управление состоянием движения: возвращает состояния isDragging (перетаскивание) и isPointerDown (нажатие на элемент).
  • Обратные вызовы (callbacks): обеспечивает функции onMoveStart, onMove, onMoveEnd для реактивного управления движением.

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

import { useMove } from '@react-aria/interactions';
import { useRef, useState } from 'react';

function DraggableBox() {
  const ref = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const { moveProps, isDragging } = useMove({
    onMoveStart: () => console.log('Начало перемещения'),
    onMove: (e) => {
      setPosition({
        x: position.x + e.deltaX,
        y: position.y + e.deltaY
      });
    },
    onMoveEnd: () => console.log('Перемещение завершено')
  });

  return (
    <div
      {...moveProps}
      ref={ref}
      style={{
        transform: `translate(${position.x}px, ${position.y}px)`,
        width: 100,
        height: 100,
        backgroundColor: isDragging ? 'blue' : 'red',
        touchAction: 'none',
        userSelect: 'none'
      }}
    />
  );
}

Разбор ключевых моментов:

  • ref связывает DOM-элемент с хук-контекстом useMove.
  • moveProps содержит все необходимые обработчики событий (onPointerDown, onPointerMove, onPointerUp), которые автоматически интегрируются с элементом.
  • deltaX и deltaY предоставляют смещение от предыдущей позиции, что упрощает вычисление нового положения элемента.
  • touchAction: 'none' отключает стандартное поведение браузера при сенсорных событиях, предотвращая прокрутку или масштабирование.

Параметры и обратные вызовы

  1. onMoveStart(event) Вызывается при начале взаимодействия. Аргумент event содержит информацию о позиции указателя и устройстве ввода.

  2. onMove({ deltaX, deltaY, pointerType }) Основной обратный вызов, срабатывающий при каждом изменении позиции.

    • deltaX, deltaY – смещение от предыдущей позиции.
    • pointerType – тип устройства (mouse, touch, pen).

  3. onMoveEnd(event) Срабатывает при завершении движения. Можно использовать для фиксации итоговой позиции элемента.

  4. isDragging Булево значение, которое отражает состояние активного перемещения. Используется для динамического изменения стилей.

Продвинутые сценарии использования

Ограничение области движения:

const bounds = { minX: 0, maxX: 300, minY: 0, maxY: 200 };

const { moveProps } = useMove({
  onMove: ({ deltaX, deltaY }) => {
    setPosition((prev) => {
      let x = Math.min(bounds.maxX, Math.max(bounds.minX, prev.x + deltaX));
      let y = Math.min(bounds.maxY, Math.max(bounds.minY, prev.y + deltaY));
      return { x, y };
    });
  }
});

Поддержка клавиатуры: Хук useMove можно комбинировать с useKeyboard для перемещения элементов с клавишами стрелок, расширяя доступность интерфейса.

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

  • Использовать requestAnimationFrame при сложных анимациях для плавного обновления позиции.
  • Ограничивать количество ререндеров, обновляя состояние только при значимых изменениях deltaX/deltaY.
  • Минимизировать тяжелые вычисления внутри onMove, чтобы не блокировать основной поток.

Совместимость и доступность

useMove автоматически учитывает особенности различных устройств ввода, поддерживает WAI-ARIA стандарты для интерактивных элементов и может быть безопасно интегрирован в компоненты, требующие drag-and-drop или жестового управления. Для улучшения доступности рекомендуется визуально обозначать состояние isDragging и обеспечивать альтернативное управление через клавиатуру.

Заключение по функционалу

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

Оглавление