@depay/react-shadow-dom

A library to easily render react compatible shadow DOMs for web components with individual styling for inside and outside.

Usage no npm install needed!

<script type="module">
  import depayReactShadowDom from 'https://cdn.skypack.dev/@depay/react-shadow-dom';
</script>

README

Quick Start

yarn add @depay/react-shadow-dom

import { ReactShadowDOM } from '@depay/react-shadow-dom';

ReactShadowDOM({
  document,
  element,
  content,
  outsideStyle: outsideStyle,
  insideStyle: insideStyle
})

ReactShadowDOM

The function ReactShadowDOM renders a react compontent (content) into an insideContainer that lives inside a shadowRoot of the outsideContainer target element (element) within a given document (document) while also applying insideStyle to the insideContainer and outsideStyle to the outsideContainer.

content

You can either pas a ReactElement to content or a function. In case of a function that function will be call with the insideContainer as an argument and it's expected to return a ReactElement.

Styles

While outsideStyle is applied to the outside container directly:

outsideStyle: `
  border: 1px solid red;
  color: black;
`

<div class="ReactShadowDOMOutsideContainer" style="border: 1px solid red;color: black;"></div>

insideStyle is wrapped in a style tag and prepend to the shadowRoot:

insideStyle: `
  .ReactShadowDOMInsideContainer {
    background: blue;
    color: white;
  }
`

#shadow-root
  <style type="text/css">.ReactShadowDOMInsideContainer {background: blue;color: white;}</style>
  <div class="ReactShadowDOMInsideContainer"><h1>I'm in a ShadowDOM</h1></div>

wich allows you to style all elements and classes within the shadowRoot.

unmount

In order to completly unmount everything (removing containers and unmounting React components), the ReactShadowDOM function returns an object containing an unmount function:


let { unmount } = ReactShadowDOM(...)

unmount()

Development

Get started

yarn install
yarn demo

Run tests

yarn test:integration

Release

npm publish