@dnanpm/styleguide/build/es/hooks/useOutsideClick.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

import { useEffect } from 'react';

/**
 * Hook to handle the click outside the referenced element
 *
 * @param {RefObject<Element>} ref - reference to the targeted element
 * @param {Function} callback - callback
 */
const useOutsideClick = (ref, callback) => {
    const handleClick = (e) => {
        if (ref.current && !ref.current.contains(e.target)) {
            callback();
        }
    };
    useEffect(() => {
        document.addEventListener('click', handleClick);
        return () => {
            document.removeEventListener('click', handleClick);
        };
    });
};

export { useOutsideClick as default };