FrontEnd/src/utilities/useClickOutside.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import React from "react";

export default function useClickOutside(
  element: HTMLElement | null | undefined,
  onClickOutside: () => void
): void {
  const onClickOutsideRef = React.useRef<() => void>(onClickOutside);

  React.useEffect(() => {
    onClickOutsideRef.current = onClickOutside;
  }, [onClickOutside]);

  React.useEffect(() => {
    if (element != null) {
      const handler = (event: MouseEvent): void => {
        let e: HTMLElement | null = event.target as HTMLElement;
        while (e) {
          if (e == element) {
            return;
          }
          e = e.parentElement;
        }
        onClickOutsideRef.current();
      };
      document.addEventListener("click", handler);
      return () => {
        document.removeEventListener("click", handler);
      };
    }
  }, [element]);
}