@qtpy/use-event

useEvent - обработчик событий

Содержание

1. Параметры
2. Пример использования
3. Особенности
4. Безопасность

Хук useEvent регистрирует обработчик события при монтировании компонента и автоматически удаляет его при размонтировании или изменении зависимостей. Он также предоставляет функцию removeListener, которую можно вызвать вручную внутри обработчика.

Параметры

Параметр	Тип	Описание
event	string	Название события, например "click", "keydown", "scroll" и т.д.
listener	(event: Event, removeListener: () => void) => void	Колбэк, вызываемый при срабатывании события. Получает объект события и функцию удаления.
options	boolean | AddEventListenerOptions	(Необязательно) Опции для addEventListener.
target	`EventTarget | React.RefObject<EventTarget	null>`	(Необязательно) Цель, к которой привязать слушатель. По умолчанию — window.
deps	React.DependencyList	(Необязательно) Зависимости, при изменении которых перерегистрируется обработчик.

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

import React, { useRef } from 'react';
import useEvent from '@qtpy/use-event';

function App() {
  const divRef = useRef<HTMLDivElement>(null);

  useEvent(
    'click',
    (e, remove) => {
      console.log('Clicked!', e);
      // Можно вручную удалить обработчик:
      // remove();
    },
    false,
    divRef
  );

  return <div ref={divRef}>Нажми на меня</div>;
}

Особенности

• Поддерживает как прямые DOM-объекты, так и ref-объекты.
• Автоматически удаляет обработчик при размонтировании.
• Предоставляет внутри слушателя возможность самостоятельно удалить обработчик вызовом removeListener().

Безопасность

Хук корректно обрабатывает случаи, когда target недоступен (например, ref.current === null), и не пытается регистрировать обработчик.