Package Exports

react-styled-frame

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-styled-frame) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-styled-frame

React iframe that works well with styled-components.

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>
)

This seems simple, but it's actually fairly involved. It require using StyleSheetManager and FrameContextConsumer in order to properly propagate all styled-components styles.

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`.

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.