React iframe that works well with styled-components.

Downloads in past


1721.1.06 years ago6 years agoMinified + gzip package size for react-styled-frame in KB


react-styled-frame (demo)
React iframe that works well with styled-components.

NPM Build Status JavaScript Style Guide
  • 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


npm install --save react-styled-frame


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' }}>
        width: 320,
        margin: '0 auto'
          Hello iframe!

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.


| 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. | | | object | | Any other props will be passed onto react-frame-component. |



MIT © hydrateio