staff_data/packages/ui/src/hooks/useClickOutside.ts

15 lines
568 B
TypeScript
Executable File

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]);
}