Hook to Capture Click Outside in React

implementation.tsx

import {useToCaptureClickOutside} from '../hooks/useToCaptureClickOutside';


const [isOpen, setOpen] = useState(false);
const closeOutsideNodeRef = useToCaptureClickOutside(isOpen, () => setOpen(false));


<div className="ml-3 relative" ref={closeOutsideRef}>
{/* rest of code */}
</div>

useToCaptureClickOutside.ts

import {useState, useEffect, useRef, MutableRefObject} from 'react';

/**
 * Capture click outside
 * 
 * How it works:
 * 
 * It holds the ref of the element (modal, dropdown, popup).
 * 
 * Then adds a event listener to the document (Which checks if a click event is outside the the elementRef)
 * 
 * When The Click is outside, it closes the element (using the callBack function - callBackOnClickOutside)
 *
 * Source and Explanation:
 * https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-with-react-hook-ba77c37c7e82
 *
 * @param isOpen
 * @param callBackOnClickOutside - function to be called when user clicks outside...
 */

export const useToCaptureClickOutside = (
  isOpen: boolean,
  callBackOnClickOutside: () => void,
): MutableRefObject<HTMLDivElement> => {
  const node = useRef<HTMLDivElement>();

  const handleClickOutside = (e) => {
    if (node.current.contains(e.target)) {
      // inside click
      return;
    }

    // outside click
    callBackOnClickOutside();
  };

  useEffect(() => {
    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    } else {
      document.removeEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]);

  return node;
};