React iframe that works well with styled-components

by React

react-styled-frame

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
View demo Download Source

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.

GitHub