react-styled-frame

React iframe that works well with styled-components.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-styled-frame
1721.1.04 years ago4 years agoMinified + gzip package size for react-styled-frame in KB

Readme

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

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

License

MIT © hydrateio