react-styled-frame
React iframe that works well with styled-components.
This is a continuation of https://www.npmjs.com/package/react-styled-frame since their version doesn't work with newer React projects.
- Uses react-frame-component under the hood
- Makes it really simple to use styled-somponents in your iframes
- Useful for testing responsive layouts and ensuring isolation from the parent document
Install
npm install @pitis/react-styled-frame
Usage
Normally, when you try to use react-frame-component or @compositor/kit's Frame, CSS styles from styled-components and theming information won't propagate to the iframe.
The following example shows how easy it is to include styled content inside of an iframe using react-styled-frame
.
import StyledFrame from '@pitis/react-styled-frame'
import styled, { ThemeProvider } from 'styled-components'
function App() {
return (
<ThemeProvider theme={{ mode: 'dark' }}>
<StyledFrame
style={{
width: 320,
margin: '0 auto',
}}
>
<InnerBox>
<Text>Hello iframe!</Text>
</InnerBox>
</StyledFrame>
</ThemeProvider>
)
}
const InnerBox = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: red;
`
const Text = styled.h4`
color: #fff;
`
export default App
This seems simple, but it's actually fairly involved. It requires using StyleSheetManager and FrameContextConsumer in order to properly propagate all styles from styled-components.
Props
Property | Type | Default | Description |
---|---|---|---|
children |
node | Required | Iframe body content. |
style |
object | { display: 'block', overflow: 'scroll', border: 0 } |
Override iframe styles. Useful for setting width and height of iframe content. |
...rest |
object | Any other props will be passed onto react-frame-component . |
Related
-
react-frame-component - This component builds on top of
react-frame-component
. -
@compositor/kit Frame - Renders children in an
<iframe>
. - styled-components - Visual primitives for the component age.
License
MIT © Pitis Radu