@coin-voyage/paykit/dist/components/ui/Portal/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import packageJson from "../../../../package.json";
const Portal = (props) => {
    props = {
        selector: "__COIN_VOYAGE__",
        ...props,
    };
    const { selector, children } = props;
    const ref = useRef(null);
    const [mounted, setMounted] = useState(false);
    useEffect(() => {
        const selectorPrefixed = `#${selector.replace(/^#/, "")}`;
        ref.current = document.querySelector(selectorPrefixed);
        if (!ref.current) {
            const div = document.createElement("div");
            div.setAttribute("id", selector);
            div.setAttribute("data-pay", `${packageJson.version}`);
            document.body.appendChild(div);
            ref.current = div;
        }
        setMounted(true);
    }, [selector]);
    if (!ref.current) {
        return null;
    }
    return mounted ? createPortal(children, ref.current) : null;
};
export default Portal;
//# sourceMappingURL=index.js.map