react-clickout-ts/dist/index.js

A simple clickout handler for React

import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef } from 'react';
export const ClickOutHandler = ({ children, enabled = true, events = ['mousedown', 'touchstart'], ignoredElements = [], onClickOut }) => {
    const wrapperRef = useRef(null);
    const shouldFire = useCallback((ev) => {
        return (enabled &&
            wrapperRef.current &&
            !wrapperRef.current.contains(ev.target) &&
            !ignoredElements.some((element) => element.contains(ev.target)));
    }, [enabled, ignoredElements]);
    useEffect(() => {
        const handleClickOut = (ev) => {
            if (onClickOut && shouldFire(ev)) {
                onClickOut(ev);
            }
        };
        for (const event of events) {
            document.addEventListener(event, handleClickOut);
        }
        return () => {
            for (const event of events) {
                document.removeEventListener(event, handleClickOut);
            }
        };
    }, [events, onClickOut, shouldFire]);
    if (typeof children === 'function') {
        return children({ ref: wrapperRef });
    }
    if (!isValidElement(children)) {
        if (process.env['NODE_ENV'] !== 'production') {
            console.warn('ClickOutHandler expects a single React element as a child.');
        }
        return children;
    }
    return cloneElement(Children.only(children), {
        ref: wrapperRef,
    });
};
//# sourceMappingURL=index.js.map