15 lines
568 B
TypeScript
15 lines
568 B
TypeScript
|
import { useEffect, RefObject } from 'react';
|
||
|
|
|
||
|
|
export function useClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: () => void) {
|
||
|
|
useEffect(() => {
|
||
|
|
function handleClickOutside(event: MouseEvent) {
|
||
|
|
console.log(event.target)
|
||
|
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||
|
|
handler();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('mousedown', handleClickOutside);
|
||
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||
|
|
}, [ref, handler]);
|
||
|
|
}
|