Render react content in an iframe

frame.tsx

import * as React from 'react'
import { createPortal } from 'react-dom'

type FrameProps = React.IframeHTMLAttributes<HTMLIFrameElement> & {
  head?: React.ComponentType<any>
  children?: React.ReactNode
}
const Frame = React.memo(({head, children, ...iframeProps}: FrameProps)=> {
  const node = React.useRef<HTMLIFrameElement>()
  const [doc, setDoc] = React.useState<Document>()

  React.useEffect(()=> {
    setDoc(node.current.contentDocument)
  }, [])

  return (
    <iframe {...iframeProps} ref={node}>
      { doc && createPortal(head,     doc.head) }
      { doc && createPortal(children, doc.body) }
    </iframe>
  )
})