use-close-on-click-outside - npm Package Compare versions

Comparing version 1.5.8 to 1.5.9

dist/cjs/index.js

@@ -5,4 +5,8 @@ 'use strict';
 
-const useCloseOnClickOutside = (ref) => {
+const useCloseOnClickOutside = (ref, target) => {
     const [isActive, setIsActive] = react.useState(false);
+    const logAndSwitchToDocument = () => {
+        console.warn('use-close-on-external-click: switching to the document target; no target specified');
+        return document;
+    };
     react.useEffect(() => {
@@ -14,5 +18,17 @@ const handleClickOutside = (event) => {
         };
-        document.addEventListener('mousedown', handleClickOutside);
+        const targetElement = target ? document.querySelector(target) : logAndSwitchToDocument();
+        if (targetElement) {
+            targetElement.addEventListener('mousedown', handleClickOutside);
+        }
+        else {
+            console.warn('use-close-on-external-click: switching to the document target; sepecified target is invalid');
+            document.addEventListener('mousedown', handleClickOutside);
+        }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            if (targetElement) {
+                targetElement.removeEventListener('mousedown', handleClickOutside);
+            }
+            else {
+                document.removeEventListener('mousedown', handleClickOutside);
+            }
         };
@@ -19,0 +35,0 @@ }, [ref]);

dist/cjs/types/index.d.ts

@@ -6,3 +6,3 @@ import { Dispatch, RefObject, SetStateAction } from "react";
 }
-declare const useCloseOnClickOutside: (ref: RefObject<any>) => useCloseOnClickOutsideReturnType;
+declare const useCloseOnClickOutside: (ref: RefObject<any>, target?: string) => useCloseOnClickOutsideReturnType;
 export default useCloseOnClickOutside;

dist/esm/index.js

 import { useState, useEffect } from 'react';
 
-const useCloseOnClickOutside = (ref) => {
+const useCloseOnClickOutside = (ref, target) => {
     const [isActive, setIsActive] = useState(false);
+    const logAndSwitchToDocument = () => {
+        console.warn('use-close-on-external-click: switching to the document target; no target specified');
+        return document;
+    };
     useEffect(() => {
@@ -11,5 +15,17 @@ const handleClickOutside = (event) => {
         };
-        document.addEventListener('mousedown', handleClickOutside);
+        const targetElement = target ? document.querySelector(target) : logAndSwitchToDocument();
+        if (targetElement) {
+            targetElement.addEventListener('mousedown', handleClickOutside);
+        }
+        else {
+            console.warn('use-close-on-external-click: switching to the document target; sepecified target is invalid');
+            document.addEventListener('mousedown', handleClickOutside);
+        }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            if (targetElement) {
+                targetElement.removeEventListener('mousedown', handleClickOutside);
+            }
+            else {
+                document.removeEventListener('mousedown', handleClickOutside);
+            }
         };
@@ -16,0 +32,0 @@ }, [ref]);

dist/esm/types/index.d.ts

@@ -6,3 +6,3 @@ import { Dispatch, RefObject, SetStateAction } from "react";
 }
-declare const useCloseOnClickOutside: (ref: RefObject<any>) => useCloseOnClickOutsideReturnType;
+declare const useCloseOnClickOutside: (ref: RefObject<any>, target?: string) => useCloseOnClickOutsideReturnType;
 export default useCloseOnClickOutside;

dist/index.d.ts

@@ -7,4 +7,4 @@ import { RefObject, Dispatch, SetStateAction } from 'react';
 }
-declare const useCloseOnClickOutside: (ref: RefObject<any>) => useCloseOnClickOutsideReturnType;
+declare const useCloseOnClickOutside: (ref: RefObject<any>, target?: string) => useCloseOnClickOutsideReturnType;
 
 export { useCloseOnClickOutside as default };

package.json

 {
   "name": "use-close-on-click-outside",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "description": "This versatile component helps you easily detect and handle clicks outside a specified element. By utilizing this hook, you can effortlessly implement functionality such as closing modals or dropdown menus when users interact with the external area.",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -18,2 +18,14 @@ use close on click outside
 
+## Configuration
+
+const [ modalActive, setModalActive ] = useCloseOnClickOutside(modalRef, '#root')
+
+The second prop passed is an optional prop that should be the selector of the target element
+
+| Option              | Default            | Description                                                         |
+| ------------------- | ------------------ | ------------------------------------------------------------------- |
+| `Target`        | `document`             | The target element e.g `#root`, `.app-root`, `document`. It switches to document if target element is invalid or null|
+
+
+
 Typescript Example
@@ -20,0 +32,0 @@ -------

No alert changes

Improved metrics

Total package byte prevSize

19034

increased by12.33%

Lines of code

88

increased by57.14%

Number of lines in readme file

92

increased by15%

No dependency changes