diff options
Diffstat (limited to 'src/utils/hooks/use-click-outside.tsx')
| -rw-r--r-- | src/utils/hooks/use-click-outside.tsx | 46 |
1 files changed, 0 insertions, 46 deletions
diff --git a/src/utils/hooks/use-click-outside.tsx b/src/utils/hooks/use-click-outside.tsx deleted file mode 100644 index cead98b..0000000 --- a/src/utils/hooks/use-click-outside.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { RefObject, useCallback, useEffect } from 'react'; - -/** - * Listen for click/focus outside an element and execute the given callback. - * - * @param el - A React reference to an element. - * @param callback - A callback function to execute on click outside. - */ -const useClickOutside = ( - el: RefObject<HTMLElement>, - callback: (target: EventTarget) => void -) => { - /** - * Check if an event target is outside an element. - * - * @param {RefObject<HTMLElement>} ref - A React reference object. - * @param {EventTarget} target - An event target. - * @returns {boolean} True if the event target is outside the ref object. - */ - const isTargetOutside = ( - ref: RefObject<HTMLElement>, - target: EventTarget - ): boolean => { - if (!ref.current) return false; - return !ref.current.contains(target as Node); - }; - - const handleEvent = useCallback( - (e: MouseEvent | FocusEvent) => { - if (e.target && isTargetOutside(el, e.target)) callback(e.target); - }, - [el, callback] - ); - - useEffect(() => { - document.addEventListener('mousedown', handleEvent); - document.addEventListener('focusin', handleEvent); - - return () => { - document.removeEventListener('mousedown', handleEvent); - document.removeEventListener('focusin', handleEvent); - }; - }, [handleEvent]); -}; - -export default useClickOutside; |
