auto-hide-hook - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

package.json

 {
   "name": "auto-hide-hook",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "types": "index.d.ts",
@@ -5,0 +5,0 @@ "typesVersions": {

README.md

@@ -31,3 +31,3 @@ # Auto Hide Hook
 ```
-useAutoHide(ref, setShow);
+useAutoHide(ref, show, setShow);
 ```
@@ -44,8 +44,9 @@
   const ref = useRef(null);
-  useAutoHide(ref, setShow);
 
+  useAutoHide(ref, show, setShow);
+
   return (
     <div ref={ref}>
+      <button onClick={() => setShow(!show)}>Toggle</button>
       <div className={show ? 'show' : 'hide'}>Hello World</div>
-      <button onClick={() => setShow(!show)}>Toggle</button>
     </div>
@@ -52,0 +53,0 @@ );

src/useAutoHide.js

 import { useEffect } from 'react';
 
-export default function useAutoHide(ref, setIsOpen) {
+export default function useAutoHide(ref, show, setIsOpen) {
   useEffect(() => {
     function handleClickOutside(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        
+      if (ref.current && ref.current.contains(event.target)) {
         const hamburger = document.getElementById('hamburger');
@@ -12,3 +11,2 @@ if (hamburger && hamburger.contains(event.target)) {
         }
-
         setIsOpen(false);
@@ -19,5 +17,15 @@ return;
 
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    window.addEventListener('scroll', handleClickOutside);
+    // Add event listeners only if 'show' is true
+    if (show) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('touchstart', handleClickOutside);
+      window.addEventListener('scroll', handleClickOutside);
+    } else {
+      // Remove event listeners if 'show' is false
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      window.removeEventListener('scroll', handleClickOutside);
+    }
+
+    // Clean up by removing event listeners when unmounting
     return () => {
@@ -28,3 +36,3 @@ document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref, setIsOpen]);
+  }, [ref, setIsOpen, show]);
 }

No alert changes

Improved metrics

Total package byte prevSize

3538

increased by13.47%

Lines of code

33

increased by37.5%

Number of lines in readme file

80

increased by1.27%

No dependency changes