use-click-outside

1import * as React from "react";
2 
3export function useClickOutside(
4  ref: React.RefObject<HTMLElement> | React.RefObject<null>,
5  handleOnClickOutside: (event: MouseEvent | TouchEvent) => void
6) {
7  React.useEffect(() => {
8    const listener = (event: MouseEvent | TouchEvent) => {
9      if (!ref.current || ref.current.contains(event.target as Node)) {
10        return;
11      }
12      handleOnClickOutside(event);
13    };
14 
15    document.addEventListener("mousedown", listener);
16    document.addEventListener("touchstart", listener);
17 
18    return () => {
19      document.removeEventListener("mousedown", listener);
20      document.removeEventListener("touchstart", listener);
21    };
22  }, [ref, handleOnClickOutside]);
23}