git.iko.soy/bridge
on master help sign in
bridge/src/lib/useOnClickOutside.ts
34 lines 915 B history raw
1// https://usehooks-ts.com/react-hook/use-on-click-outside
2import { RefObject, useEffect } from 'react';
4type AnyEvent = MouseEvent | TouchEvent;
6function useOnClickOutside<T extends HTMLElement = HTMLElement>(
7 ref: RefObject<T>,
8 handler: (event: AnyEvent) => void
9): void {
10 useEffect(() => {
11 const listener = (event: AnyEvent) => {
12 const el = ref?.current;
14 // Do nothing if clicking ref's element or descendent elements
15 if (!el || el.contains(event.target as Node)) {
16 return;
17 }
19 handler(event);
20 };
22 document.addEventListener(`mousedown`, listener);
23 document.addEventListener(`touchstart`, listener);
25 return () => {
26 document.removeEventListener(`mousedown`, listener);
27 document.removeEventListener(`touchstart`, listener);
28 };
30 // Reload only if ref or handler changes
31 }, [ref, handler]);
34export default useOnClickOutside;