react-shadow

   

• npm: npm i react-shadow --save
• Heroku: http://react-shadow.herokuapp.com/

---

Getting Started

By using ReactShadow you have all the benefits of Shadow DOM in React.

import ShadowDOM from 'react-shadow';

export default props => {
    return (
        <ShadowDOM cssDocuments={['css/core/calendar.css', props.theme]}>
            <h1>Calendar</h1>
        </ShadowDOM>
    );
}

In the above example the h1 element will become the host element with a shadow boundary — and the two defined CSS documents will be fetched and appended.

Avoiding FOIC

As the CSS documents are being fetched over the network, the host element will have a className of resolving for you to avoid the dreaded FOIC. Once all of the documents have been attached the className will change to resolved.

Cached Documents

Where components share CSS documents, only one instance of the CSS document will be fetched due to memoize of the fetchStylesheet function.