import * as React from 'react' ; import { createPortal } from 'react-dom' ; export const Portal = React . forwardRef ( ( { children , type = 'reach-portal' } , forwardedRef ) => { const mountNode = React . useRef ( null ) ; const portalNode = React . useRef ( null ) ; let [ , forceUpdate ] = React . useState ( ) ; React . useLayoutEffect ( ( ) => { const ownerDocument = mountNode . current . ownerDocument ; portalNode . current = ownerDocument . createElement ( type ) ; ownerDocument . body . appendChild ( portalNode . current ) ; forceUpdate ( { } ) ; return ( ) => { if ( portalNode . current && portalNode . current . ownerDocument ) { portalNode . current . ownerDocument . body . removeChild ( portalNode . current ) ; } } ; } , [ type ] ) ; return portalNode . current ? createPortal ( children , portalNode . current ) : < div ref = { mountNode } />; } ) ; Portal . displayName = 'Portal' ;