From 4533addcfd036c94cb11438b7b7b650815b3bb99 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Mon, 14 Mar 2022 12:41:08 -0400
Subject: [PATCH] Add hook to detect click outside a ref
---
src/cryptometrics/hooks/index.js | 2 ++
src/cryptometrics/hooks/useFilters.js | 4 ++--
src/cryptometrics/hooks/useOnClickOutside.js | 18 ++++++++++++++++++
3 files changed, 22 insertions(+), 2 deletions(-)
create mode 100644 src/cryptometrics/hooks/index.js
create mode 100644 src/cryptometrics/hooks/useOnClickOutside.js
diff --git a/src/cryptometrics/hooks/index.js b/src/cryptometrics/hooks/index.js
new file mode 100644
index 0000000..678b577
--- /dev/null
+++ b/src/cryptometrics/hooks/index.js
@@ -0,0 +1,2 @@
+export * from "./useFilters";
+export * from "./useOnClickOutside";
diff --git a/src/cryptometrics/hooks/useFilters.js b/src/cryptometrics/hooks/useFilters.js
index 145c8d4..d5fde2b 100644
--- a/src/cryptometrics/hooks/useFilters.js
+++ b/src/cryptometrics/hooks/useFilters.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
/**
* Format of each filter should be:
@@ -8,7 +8,7 @@ import React, { useState } from "react";
* value: ""
* }
*/
-export default function useFilters(initialArray) {
+export function useFilters(initialArray) {
const [filters, setFilters] = useState(initialArray);
const checkIfFilterExists = (filter) => {
diff --git a/src/cryptometrics/hooks/useOnClickOutside.js b/src/cryptometrics/hooks/useOnClickOutside.js
new file mode 100644
index 0000000..95b795f
--- /dev/null
+++ b/src/cryptometrics/hooks/useOnClickOutside.js
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+export function useOnClickOutside(ref, handler) {
+ useEffect(() => {
+ const listener = (event) => {
+ if (ref.current && ref.current?.contains(event.target)) {
+ return;
+ }
+ handler(event);
+ };
+ document.addEventListener("mousedown", listener);
+ document.addEventListener("touchstart", listener);
+ return () => {
+ document.removeEventListener("mousedown", listener);
+ document.removeEventListener("touchstart", listener);
+ };
+ }, [ref, handler]);
+}
--
GitLab