diff --git a/src/cryptometrics/hooks/index.js b/src/cryptometrics/hooks/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..678b5771db58d2c91036a64425ed479804687c5d
--- /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 145c8d4fe04a63d7d26ef39aa3da2d0dcedbf04a..d5fde2b6ec994d22f27eb04ca71f2faeff9eb9bd 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 0000000000000000000000000000000000000000..95b795f15da722a981c642567a8238a33e0e9e56
--- /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]);
+}