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), и не пытается регистрировать обработчик.