react-styled-frame (demo)

React iframe that works well with styled-components.

• 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 --save 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 React, { Component } from 'react'

import StyledFrame from 'react-styled-frame'
import styled, { ThemeProvider } from 'styled-components'

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 () => (
  <ThemeProvider theme={{ mode: 'dark' }}>
    <StyledFrame
      style={{
        width: 320,
        margin: '0 auto'
      }}
    >
      <InnerBox>
        <Text>
          Hello iframe!
        </Text>
      </InnerBox>
    </StyledFrame>
  </ThemeProvider>
)

You can view the above demo live here.

This seems simple, but it's actually fairly involved. It require 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 © hydrateio