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 @@ -------

New alerts