useClickOutside Hook
A custom React Hook to detect clicks outside a component (e.g. modals/dropdowns) with TypeScript support
Code
import { useEffect, RefObject } from 'react';
type Handler = (event: MouseEvent | TouchEvent) => void;
function useClickOutside<T extends HTMLElement = HTMLElement>(
ref: RefObject<T>,
handler: Handler,
listenCapturing = true
): void {
useEffect(() => {
const listener = (event: MouseEvent | TouchEvent) => {
const el = ref?.current;
__TOKEN_15__ (!el || el.contains(event.target as Node)) {
return;
}
handler(event);
};
document.addEventListener('click', listener, listenCapturing);
document.addEventListener('touchstart', listener, listenCapturing);
__TOKEN_17__ () => {
document.removeEventListener('click', listener, listenCapturing);
document.removeEventListener('touchstart', listener, listenCapturing);
};
}, [ref, handler, listenCapturing]);
}
// Usage example
// const modalRef = useRef<HTMLDivElement>(null);
// useClickOutside(modalRef, () => setIsModalOpen(false));