@hrnec06/react_utils 1.7.4 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"

package/src/hooks/useOutsideClick.ts

@@ -0,0 +1,17 @@
+import { Nullable } from "@hrnec06/util";
+import useEvent from "./useEvent";
+import useListener from "./useListener";
+
+export default function useOutsideClick(
+	element: Nullable<HTMLElement>,
+	callback: (element: MouseEvent) => void
+)
+{
+	const cb = useEvent(callback);
+
+	useListener(document, 'mousedown', (event) => {
+		if (!element || !(event.target instanceof Node) || element.contains(event.target)) return;
+
+		cb(event);
+	}, [cb, element]);
+}

package/src/index.ts

@@ -8,6 +8,7 @@ import useEfficientRef from "./hooks/useEfficientRef";
 import useUUID from "./hooks/useUUID";
 import useFlags from "./hooks/useFlags";
 import useNamespacedId from "./hooks/useNamespacedId";
+import useOutsideClick from "./hooks/useOutsideClick";
 import useTransition, { transitionDataAttributes } from "./hooks/useTransition";
 import useLocalStorage from "./hooks/useLocalStorage";
 import useDebounce from "./hooks/useDebounce";
@@ -28,7 +29,6 @@ import ContextMenu from "./components/ContextMenu/ContextMenu";
 import * as util from './lib/utils';
 import ContextError from "./lib/errors/ContextError";
 
-
 export {
 	// Hooks
 	useDebounce,
@@ -42,6 +42,7 @@ export {
 	useListener,
 	useLocalStorage,
 	useNamespacedId,
+	useOutsideClick,
 	useSyncRef,
 	useSyncRefAuto,
 	useTransition,