Mutation Observer to get specific element addition or removal callback on dom manipulation

useMutationObserver.tsx

import { useEffect, useRef } from "react";

interface Callbacks {
    onVisible?: () => void;
    onHidden?: () => void;
}

const useMutationObserver = (
    elementId: string,
    callbacks: Callbacks = {
        onVisible: () => { },
        onHidden: () => { }
    }) => {

    let visibleRef = useRef(false);

    const mutationObserver = new MutationObserver(function (_) {
        let element = document.getElementById(elementId);
        if (element) {
            if (!visibleRef?.current) {
                callbacks.onVisible?.();
                visibleRef.current = true;
            }
        } else {
            if (visibleRef.current) {
                callbacks.onHidden?.();
                visibleRef.current = false;
            }
        }
    });

    useEffect(() => {
        mutationObserver.observe(document.body, { subtree: false, childList: true });
        return () => {
            mutationObserver.disconnect();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return {
        visibleRef
    }
}

export default useMutationObserver;