function useOnVisibleChange(fn) {
    const observer = useRef(null);
    useOnUnmount(() => observer.current?.disconnect());

    return useCallback(node => {
        observer.current?.disconnect();
        if (node) observer.current = observeVisibleChange(fn, node);
    }, []);
}
/**
 * Hook to run a function when a DOM element becomes visible / invisible.
 *
 * @see observeVisibleChange() for more details.
 *
 * @param {function} fn - receives a boolean signifying if visible.
 * @returns {function} - callback ref to be placed on target component
 */
Hook to run a function when a DOM element becomes visible / invisible.
@see observeVisibleChange() for more details.

@param {function} fn - receives a boolean signifying if visible.
@returns {function} - callback ref to be placed on target component
Hook to run a function when a DOM element becomes visible / invisible . @see observeVisibleChange () for more details . @param { function } fn - receives a boolean signifying if visible . @returns { function } - callback ref to be placed on target component
function useOnVisibleChange(fn) {
    const observer = useRef(null);
    useOnUnmount(() => observer.current?.disconnect());
    return useCallback(node => {
        observer.current?.disconnect();
        if (node) observer.current = observeVisibleChange(fn, node);
    }, []);
}
function useOnVisibleChange ( fn ) { const observer = useRef ( null ) ; useOnUnmount ( ( ) => observer . current ?. disconnect ( ) ) ; return useCallback ( node => { observer . current ?. disconnect ( ) ; if ( node ) observer . current = observeVisibleChange ( fn , node ) ; } , [ ] ) ; }
Hook to run a function when a DOM element becomes visible / invisible.
Hook to run a function when a DOM element becomes visible / invisible .