import {ReactNode} from 'react';
import {createPortal} from 'react-dom';

export const renderForeground = (element: ReactNode) => {
    const target = document.getElementById('foreground');

    if (target === null) {
        const hook = document.createElement('div');
        hook.setAttribute('id', 'foreground');
        document.body.appendChild(hook);
        return createPortal(element, hook);
    }

    return createPortal(element, target);
};