Nutritious Pancake Mountain

    This package has been deprecated

    Author message:

    moved to @depay/react-shadow-dom

    depay-react-shadow-dom

    2.0.4 • Public • Published

    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
    

    Install

    npm i depay-react-shadow-dom

    DownloadsWeekly Downloads

    4

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    12.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • depay-sebastian
    • jarvis-depay