Cacher is the code snippet organizer for pro developers

import { useEffect } from 'react';

function useClickOutside(refs, callback) {
    function handleClickOutside(event) {
        refs = Array.isArray(refs) ? refs : [refs];
        const mountedRefs = refs.every((ref) => !!ref.current);

        if (mountedRefs) {
            const isSomeRef = refs.every(
                (ref) => !ref.current.contains(event.target)
            );

            if (isSomeRef && callback) callback();
        }
    }

    useEffect(() => {
        // Bind the event listener
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            // Unbind the event listener on clean up
            document.removeEventListener('mousedown', handleClickOutside);
        };
    });
}

export default useClickOutside;