Add feature to close dropdown when clicked outside

src/cryptometrics/components/dropdown/FilterDropdown.js

@@ -5,9 +5,13 @@ import Button from "../button/Button";
 import { RadioInputForm } from "../radio/RadioForm";
 import { CSSTransition } from "react-transition-group";
 
-export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
+export function FilterDropdown({
+  filterOptions,
+  setOpen,
+  addFilter,
+  dropdownRef,
+}) {
   const [selectedFilter, setSelectedFilter] = useState(null);
-
   const [radioValue, setRadioValue] = useState("is");
   const [inputValue, setInputValue] = useState("");
 
@@ -39,7 +43,7 @@ export function FilterDropdown({ filterOptions, setOpen, addFilter }) {
   };
 
   return (
-    <div className="absolute flex flex-row z-50">
+    <div className="absolute flex flex-row z-50" ref={dropdownRef}>
       <div
         className={classNames(
           "dark:bg-dark-600 w-56 h-max max-h-72 rounded-xl mt-2 transition-all duration-100 p-1 overflow-y-scroll shadow-lg shadow-dark-600"

src/cryptometrics/pages/index.js

-import React, { useState } from "react";
+import React, { useState, useRef, useCallback } from "react";
 import Head from "next/head";
 import Container from "../components/content/Container";
 import Main from "../components/content/Main";
@@ -17,7 +17,7 @@ import {
   TableIcon,
   XIcon,
 } from "@heroicons/react/outline";
-import useFilters from "../hooks/useFilters";
+import { useFilters, useOnClickOutside } from "../hooks";
 import { Filter, FilterButton, Filters } from "../components/filters/Filter";
 import { FilterDropdown } from "../components/dropdown/FilterDropdown";
 import { filterOptions } from "../constants";
@@ -29,7 +29,10 @@ import Link from "next/link";
 
 export default function Home() {
   const [filters, addFilter, removeFilter] = useFilters([]);
+  const filterDropdownRef = useRef(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const callbackDropdownClose = useCallback(() => setDropdownOpen(false), []);
+  useOnClickOutside(filterDropdownRef, callbackDropdownClose);
   const [searchText, setSearchText] = useState("");
   const listOfCoins = useCryptoList("usd", 21, false);
 
@@ -93,9 +96,9 @@ export default function Home() {
                       setDropdownOpen(!dropdownOpen) && addFilter({})
                     }
                   />
-
                   {dropdownOpen && (
                     <FilterDropdown
+                      dropdownRef={filterDropdownRef}
                       setOpen={setDropdownOpen}
                       addFilter={addFilter}
                       filterOptions={Object.keys(filterOptions)