ahooks/es/useClickAway/index.js

react hooks library

import useLatest from '../useLatest';
import { getTargetElement } from '../utils/domTarget';
import getDocumentOrShadow from '../utils/getDocumentOrShadow';
import useEffectWithTarget from '../utils/useEffectWithTarget';
const useClickAway = (onClickAway, target, eventName = 'click') => {
    const onClickAwayRef = useLatest(onClickAway);
    useEffectWithTarget(() => {
        const handler = (event) => {
            const targets = Array.isArray(target) ? target : [target];
            if (targets.some((item) => {
                const targetElement = getTargetElement(item);
                return !targetElement || targetElement.contains(event.target);
            })) {
                return;
            }
            onClickAwayRef.current(event);
        };
        const documentOrShadow = getDocumentOrShadow(target);
        const eventNames = Array.isArray(eventName) ? eventName : [eventName];
        eventNames.forEach((event) => {
            documentOrShadow.addEventListener(event, handler);
        });
        return () => {
            eventNames.forEach((event) => {
                documentOrShadow.removeEventListener(event, handler);
            });
        };
    }, Array.isArray(eventName) ? eventName : [eventName], target);
};
export default useClickAway;