import React , { useRef , useEffect , useState } from 'react' ; import ReactDOM from 'react-dom' ; const PORTAL_ID = 'rmwcPortal' ; export type PortalPropT = Element | string | boolean | undefined | null ; export function Portal ( ) { const el = useRef ( document . createElement ( 'div' ) ) ; return < div ref = { el } id = { PORTAL_ID } / > ; } export function PortalChild ( { children , renderTo } ) { const [ portalEl , setPortalEl ] = useState < Element | undefined > ( ) ; useEffect ( ( ) => { let element = undefined ; if ( renderTo === true ) { element = document . getElementById ( PORTAL_ID ) || undefined ; ! element && console . warn ( 'No default Portal found. Did you forget to include it in the root of your app? `import { Portal } from "@rmwc/base";`' ) ; } else if ( typeof renderTo === 'string' ) { element = document . querySelector ( renderTo ) || undefined ; ! element && console . warn ( `The selector you provided for renderToPortal "${ renderTo }" didn't find any elements.` ) ; } else if ( renderTo instanceof Element ) { element = renderTo ; } if ( element !== portalEl ) { setPortalEl ( element ) ; } } , [ renderTo , portalEl ] ) ; if ( portalEl ) { return ReactDOM . createPortal ( children , portalEl ) ; } return < > { children } < />; }