Run a callback when the user clicks outside a ref element. Ideal for modals and dropdowns.
import { useEffect, RefObject } from 'react';
export function useOnClickOutside(
ref: RefObject<HTMLElement | null>,
handler: (e: MouseEvent | TouchEvent) => void
): void {
useEffect(() => {
const listener = (e: MouseEvent | TouchEvent) => {
const el = ref?.current;
if (!el || el.contains(e.target as Node)) return;
handler(e);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, [ref, handler]);
}Create a ref and attach it to the element that should be considered "inside" (e.g. modal or dropdown container).
Pass a callback that runs when the user clicks or taps outside that element. Use to close modal/dropdown.
useOnClickOutside(menuRef, () => setOpen(false));