Обработка внешних кликов

Хук useOnClickOutside вызывает колбэк при клике вне группы отслеживаемых элементов, указанных в массиве refs. Для надежности используется событие mousedown, а не click. mousedown срабатывает до возможного удаления элемента из DOM, предотвращая баги, когда цель клика исчезает до проверки.

import { useEffect } from 'react';

function useOnClickOutside(refs, handler) {
  useEffect(() => {
    const listener = (event) => {
      if (refs.every(ref => !ref.current?.contains(event.target))) {
        handler(event);
      }
    };
    document.addEventListener('mousedown', listener);
    return () => document.removeEventListener('mousedown', listener);
  }, [refs, handler]);
}

👉 @sWebDev