blob: c9a113243efa2f716f55d95bd1d2e9bd65898d71 (
plain)
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
28
29
30
31
32
33
34
35
36
37
38
|
import { useCallback, useEffect, useRef, type MutableRefObject } from 'react';
export type useOnClickOutsideHandler = (ev: MouseEvent | FocusEvent) => void;
/**
* Detect clicks (or focus) outside a component.
*
* @param {useOnClickOutsideHandler} [handler] - A function to handle the event.
* @returns {RefObject<T>} A ref object.
*/
export const useOnClickOutside = <T extends HTMLElement>(
handler?: useOnClickOutsideHandler
): MutableRefObject<T | null> => {
const ref = useRef<T | null>(null);
const listener = useCallback(
(ev: MouseEvent | FocusEvent) => {
if (!handler || !ref.current || ref.current.contains(ev.target as Node)) {
return;
}
handler(ev);
},
[handler]
);
useEffect(() => {
document.addEventListener('click', listener, true);
document.addEventListener('focusin', listener, true);
return () => {
document.removeEventListener('click', listener, true);
document.removeEventListener('focusin', listener, true);
};
}, [listener]);
return ref;
};
|
