@pitis/react-styled-frame

3.0.0 • Public • Published

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

License

MIT © Pitis Radu

Package Sidebar

Install

npm i @pitis/react-styled-frame

Weekly Downloads

3

Version

3.0.0

License

MIT

Unpacked Size

58.4 kB

Total Files

21

Last publish

Collaborators

  • pitis