import React, { useLayoutEffect, useRef } from 'react'
import { Box, BoxProps } from 'theme-ui'

export const RenderInBody: React.FunctionComponent = (props: BoxProps) => {
    const container = useRef(null)
    useLayoutEffect(() => {
        const el = container.current
        if (el) {
            document.body.appendChild(el)
        }
        return () => {
            if (el) {
                document.body.removeChild(el)
            }
        }
    }, [])
    return <Box {...props} ref={container} />
}