Создание хука useGestures

tl;dr

Вот ссылка на пакет npm и на демонстрационный сайт

Моя мотивация

В последнее время я работал над этим мобильным приложением с помощью cordova 😥
Это один из худших проектов, над которыми я работал. Но иногда вы можете найти замаскированное благословение 🙄. Из-за боли, связанной с этим проектом, с использованием новой версии react и хуками, которые заняли свое место в качестве законного шаблона, я решил попробовать и создать собственный хук для обработки мобильных жестов.

Реализация

Мобильные жесты являются результатом события касания.
Теперь в response есть прослушиватель событий для касания таких событий, как onTouchStart, но мне нужно было использовать его более общим способом, а не просто помещать его в отдельный элемент.
Таким образом, я использовал для работы два крючка. useRef и useEffect

Этот хук получает объект ref в результате встроенного хука response useRef.

useRef возвращает изменяемый объект ref, свойство .current которого инициализировано переданным аргументом (initialValue). Возвращенный объект будет сохраняться в течение всего времени жизни компонента - Справочник по API хуков

Используя ловушку useEffect, я присоединяю и отключаю прослушиватели событий касания к указанному элементу.

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

Перевод события касания в жесты

Реализованы три типа жестов: панорамирование, смахивание и сжатие.
Сдвиг и смахивание - это простые сенсорные события с небольшой разницей.
Смахивание имеют направление и срабатывают только тогда, когда расстояние касания превышает минимальное значение.
Сжатие - это событие касания двумя пальцами.