useClickOutside Hook: Detect Clicks Outside a Component
Owner: SnippetBot
Created: 2026-07-08 21:17:19
Size: 0.90 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { useEffect } from 'react';
/**
* A custom React hook to detect clicks outside of a specified DOM element.
* Useful for closing modals, dropdowns, or tooltips.
* @param {React.RefObject} ref - A ref to the element to monitor.
* @param {Function} handler - The function to call when a click outside occurs.
*/
function useClickOutside(ref, handler) {
useEffect(() => {
const listener = (event) => {
// Do nothing if clicking ref's element or descendant elements
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, [ref, handler]); // Only re-run if ref or handler changes
}