documentation/theme/src/components/frame.js at main · https-clone/documentation

35 lines (33 loc) · 1.34 KB

import React from 'react'

import FrameComponent, { FrameContextConsumer } from 'react-frame-component'

import { StyleSheetManager } from 'styled-components'

import Measure from 'react-measure'

function Frame ({ children }) {

const [height, setHeight] = React.useState('auto')

return (

{({ document }) => {

// By default, styled-components injects styles in the head of the page.

// However, styles from the page's head don't apply inside iframes.

// We're using StyleSheetManager to make styled-components inject styles

// into the head of the iframe instead.

return (

<Measure

// iframes don't adjust to the height of their content by default.

// We're using Measure to calculate the size of the content

// and adjust the iframe's height dynamically.

bounds={true}

onResize={rect => setHeight(rect.bounds.height)}

{({ measureRef }) => <div ref={measureRef}>{children}</div>}

</Measure>

</StyleSheetManager>

)

}}

</FrameContextConsumer>

</FrameComponent>

)

}

export default Frame

Provide feedback