@re-flex/ui/Portal/index.js

Re-Flex ui library

import { useRef, useState } from "react";
import { createPortal } from "react-dom";
import useIsomorphicEffect from "../hooks/useIsomorphicEffect";
const Portal = ({ children, container = document.getElementById("destination"), open = false, disable, }) => {
    const [mount, setMount] = useState(container);
    const portalKey = useRef(Number(Date.now()).toString(8)).current;
    useIsomorphicEffect(() => {
        let destination = document.getElementById("destination");
        if (destination === null) {
            destination = document.createElement("div");
            destination.id = "destination";
            document.body.append(destination);
        }
        setMount(destination);
    }, []);
    return disable
        ? children
        : open && mount
            ? createPortal(children, container || mount, portalKey)
            : null;
};
export default Portal;