import { createPortal } from '@wordpress/element';

let host = null;

/**
 * Renders overlays (toasts, alerts, progress) at the end of <body>.
 *
 * The screens animate in with a CSS transform, and a transformed ancestor turns
 * `position: fixed` into "fixed to that box", so overlays rendered in place only
 * covered part of the page.
 *
 * @param {Object} props
 * @param {Object} props.children Overlay content.
 */
const Portal = ( { children } ) => {
	if ( ! host ) {
		host = document.createElement( 'div' );
		host.className = 'ssgsw-react ssgsw-portal';
		document.body.appendChild( host );
	}

	return createPortal( children, host );
};

export default Portal;