react-styled-shadow-dom

react-styled-shadow-dom (demo)

React shadow DOM that works well with styled-components.

• Uses react-shadow under the hood
• Makes it really simple to use styled-somponents in shadow DOM
• Useful for testing responsive layouts and ensuring isolation from the parent document

Install

npm install --save react-styled-shadow-dom

Usage

Normally, when you try to use react-shadow, CSS styles from styled-components and theming information won't propagate to the shadow DOM.

The following example shows how easy it is to include styled content inside of shadow DOM using react-styled-shadow-dom.

import React, { Component } from 'react'

import StyledShadow from 'react-styled-shadow-dom'
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' }}>
    <StyledShadow
      style={{
        width: 320,
        margin: '0 auto'
      }}
    >
      <InnerBox>
        <Text>Hello iframe!</Text>
      </InnerBox>
    </StyledShadow>
  </ThemeProvider>
)

You can view the above demo live here.

This seems simple, but it's actually fairly involved. It requires the use of StyleSheetManager 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-shadow - Renders children in shadow DOM.
• styled-components - Visual primitives for the component age.

License

MIT © hydrateio