feat: Support for Multiple Refs in useClickAway

docs/useClickAway.md

@@ -1,7 +1,7 @@
 # `useClickAway`
 
 React UI hook that triggers a callback when user
-clicks outside the target element.
+clicks outside the target element or elements.
 
 
 ## Usage
@@ -10,17 +10,40 @@ clicks outside the target element.
 import {useClickAway} from 'react-use';
 
 const Demo = () => {
-  const ref = useRef(null);
-  useClickAway(ref, () => {
-    console.log('OUTSIDE CLICKED');
-  });
+ const ref = useRef(null);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+
+  useClickAway<MouseEvent>(ref, action('outside clicked'));
+  useClickAway<MouseEvent>([ref1, ref2], action('outside clicked blue or green box'));
 
   return (
-    <div ref={ref} style={{
-      width: 200,
-      height: 200,
-      background: 'red',
-    }} />
+    <>
+    <div
+      ref={ref}
+      style={{
+        width: 200,
+        height: 200,
+        background: 'red',
+      }}
+    />
+    <div
+      ref={ref1}
+      style={{
+        width: 200,
+        height: 200,
+        background: 'green',
+      }}
+    />
+    <div
+      ref={ref2}
+      style={{
+        width: 200,
+        height: 200,
+        background: 'blue',
+      }}
+    />
+    </>
   );
 };
 ```
@@ -31,4 +54,5 @@ const Demo = () => {
 useClickAway(ref, onMouseEvent)
 useClickAway(ref, onMouseEvent, ['click'])
 useClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
+useClickAway([ref1, ref2], onMouseEvent)
 ```

src/useClickAway.ts

@@ -4,18 +4,23 @@ import { off, on } from './misc/util';
 const defaultEvents = ['mousedown', 'touchstart'];
 
 const useClickAway = <E extends Event = Event>(
-  ref: RefObject<HTMLElement | null>,
+  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
   onClickAway: (event: E) => void,
   events: string[] = defaultEvents
 ) => {
   const savedCallback = useRef(onClickAway);
+
   useEffect(() => {
     savedCallback.current = onClickAway;
   }, [onClickAway]);
+
   useEffect(() => {
     const handler = (event) => {
-      const { current: el } = ref;
-      el && !el.contains(event.target) && savedCallback.current(event);
+      const refArray = Array.isArray(refs) ? refs : [refs];
+      const existingRefs = refArray.filter((ref) => Boolean(ref?.current)); // Filter out null refs
+      if (existingRefs.every(ref => ref.current && !ref.current.contains(event.target))) {
+        savedCallback.current(event);
+      }
     };
     for (const eventName of events) {
       on(document, eventName, handler);
@@ -25,7 +30,7 @@ const useClickAway = <E extends Event = Event>(
         off(document, eventName, handler);
       }
     };
-  }, [events, ref]);
+  }, [events, refs]);
 };
 
-export default useClickAway;
+export default useClickAway;

stories/useClickAway.story.tsx

@@ -7,9 +7,14 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const ref = useRef(null);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+
   useClickAway<MouseEvent>(ref, action('outside clicked'));
+  useClickAway<MouseEvent>([ref1, ref2], action('outside clicked blue or green box'));
 
   return (
+    <>
     <div
       ref={ref}
       style={{
@@ -18,6 +23,23 @@ const Demo = () => {
         background: 'red',
       }}
     />
+    <div
+      ref={ref1}
+      style={{
+        width: 200,
+        height: 200,
+        background: 'green',
+      }}
+    />
+    <div
+      ref={ref2}
+      style={{
+        width: 200,
+        height: 200,
+        background: 'blue',
+      }}
+    />
+    </>
   );
 };