@dossierhq/design/lib/components/Portal/Portal.js

The design system for Dossier.

import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
export function Portal({ children }) {
    const [container] = useState(() => {
        const div = document.createElement('div');
        div.setAttribute('class', 'portal-container');
        return div;
    });
    useEffect(() => {
        const portalRoot = getPortalRoot();
        portalRoot.appendChild(container);
        return () => {
            portalRoot.removeChild(container);
        };
    }, [container]);
    return createPortal(children, container);
}
function getPortalRoot() {
    let portalRoot = document.getElementById('portal-root');
    if (!portalRoot) {
        portalRoot = document.createElement('div');
        portalRoot.setAttribute('id', 'portal-root');
        document.body.appendChild(portalRoot);
    }
    return portalRoot;
}
//# sourceMappingURL=Portal.js.map