Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Wildhoney/ReactShadow
:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.
https://github.com/Wildhoney/ReactShadow
components css-document react reactjs shadow-boundary shadow-dom style-encapsulation webcomponents
Last synced: 8 days ago
JSON representation
:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.
- Host: GitHub
- URL: https://github.com/Wildhoney/ReactShadow
- Owner: Wildhoney
- License: mit
- Created: 2015-02-12T15:48:36.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-20T21:36:43.000Z (5 months ago)
- Last Synced: 2024-10-28T00:12:24.142Z (12 days ago)
- Topics: components, css-document, react, reactjs, shadow-boundary, shadow-dom, style-encapsulation, webcomponents
- Language: JavaScript
- Homepage: https://react-shadow.herokuapp.com/
- Size: 6.04 MB
- Stars: 1,310
- Watchers: 18
- Forks: 81
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web-components - react-shadow - Utilise Shadow DOM in React with all the benefits of style encapsulation. (Libraries / Integrations)
README
> Utilise Shadow DOM in React with all the benefits of style encapsulation.
- **npm**: `npm i react-shadow`
- **yarn**: `yarn add react-shadow`
- **Heroku**: [https://react-shadow.herokuapp.com/](https://react-shadow.herokuapp.com) ([alternative](https://react-shadow-2.herokuapp.com))
---
## Getting Started
Creating the [shadow root](https://www.w3.org/TR/shadow-dom/) is as simple as using the default export to construct a shadow root using the node name provided – for example `root.div` would create a `div` as the host element, and a shadow root as its immediate descendant — all of the child elements would then be descendants of the shadow boundary.
```jsx
import root from 'react-shadow';
import styles from './styles.css';
export default function Quote() {
return (
There is strong shadow where there is much light.
― Johann Wolfgang von Goethe.
{styles}
);
}
```
[](https://codesandbox.io/s/react-shadow-by6bo?fontsize=14)
Applying styles requires either applying the styles directly to the component as a string, or importing the CSS documents as a string as part of your build process. You can then append the `style` component directly to your shadow boundary via your component's tree. In [the example](https://github.com/Wildhoney/ReactShadow/tree/master/example) we use the following Webpack configuration to import CSS documents as strings.
```javascript
{
test: /\.css$/,
loader: ['to-string-loader', 'css-loader']
}
```
Alternatively you can use [`styled-components`](https://www.styled-components.com/) normally, as each time a shadow boundary is created, a new `StyleSheetManager` context is also created which will encapsulate all related styles in their corresponding shadow root — to use this `import react-shadow/styled-components` instead of `import react-shadow`, likewise if you'd like to use [`emotion`](https://emotion.sh/docs/styled) you can `import react-shadow/emotion`.
```javascript
import root from 'react-shadow/styled-components';
import root from 'react-shadow/emotion';
// ...
;
```
You may pass any props you like to the `root.*` component which will be applied directly to the host element, including event handlers and class names. There are also a handful of options that are used for the `attachShadow` invocation.
```javascript
ShadowRoot.propTypes = {
mode: PropTypes.oneOf(['open', 'closed']),
delegatesFocus: PropTypes.bool,
styleSheets: PropTypes.arrayOf(
PropTypes.instanceOf(globalThis.CSSStyleSheet),
),
children: PropTypes.node,
};
ShadowRoot.defaultProps = {
mode: 'open',
delegatesFocus: false,
styleSheets: [],
children: null,
};
```
In cases where you need the underlying element and its associated shadow boundary, you can use a standard `ref` which will be invoked with the host element – from that you can use `shadowRoot` to access its shadow root if the `mode` has been set to the default `open` value.
```javascript
const node = useRef(null);
// ...
;
```
Recently and at long last there has been some movement in introducing a [declarative shadow DOM](https://tomalec.github.io/declarative-shadow-dom/) which `react-shadow` _tentatively_ supports – as it's experimental, open to sudden spec changes, and React finds it difficult to rehydrate – by using the `ssr` prop.
```javascript
const node = useRef(null);
// ...
;
```