36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
/**
|
|
* Click Outside Detection Hook
|
|
* Detects clicks outside of a referenced element and triggers a handler
|
|
*/
|
|
|
|
import { RefObject, useEffect } from 'react';
|
|
|
|
/**
|
|
* Hook that triggers a handler when user clicks outside the referenced element
|
|
* Useful for closing dropdowns, modals, or menus when clicking outside
|
|
*
|
|
* @param ref - React ref object pointing to the element to monitor
|
|
* @param handler - Callback function to execute when click occurs outside the element
|
|
*
|
|
* @example
|
|
* const menuRef = useRef<HTMLDivElement>(null);
|
|
* useOnClickOutside(menuRef, () => setMenuOpen(false));
|
|
*/
|
|
export function useOnClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent | TouchEvent) => void) {
|
|
useEffect(() => {
|
|
const listener = (event: MouseEvent | TouchEvent) => {
|
|
if (!ref.current || ref.current.contains(event.target as Node)) {
|
|
return;
|
|
}
|
|
handler(event);
|
|
};
|
|
|
|
document.addEventListener('mousedown', listener);
|
|
document.addEventListener('touchstart', listener);
|
|
|
|
return () => {
|
|
document.removeEventListener('mousedown', listener);
|
|
document.removeEventListener('touchstart', listener);
|
|
};
|
|
}, [ref, handler]);
|
|
} |