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.
classes
insideClasses
sets classes on inside container:
insideClasses: ['contained', 'another-class']
#shadow-root
<div class="ReactShadowDOMInsideContainer contained another-class"><h1>I'm in a ShadowDOM</h1></div>
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
Debug tests
yarn test:cypress:debug 'cypress/integration/ReactShadowDOM.js'
Release
npm publish