{"id":14990380,"url":"https://github.com/wildhoney/reactshadow","last_synced_at":"2025-05-13T16:11:56.752Z","repository":{"id":27238035,"uuid":"30709671","full_name":"Wildhoney/ReactShadow","owner":"Wildhoney","description":":beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.","archived":false,"fork":false,"pushed_at":"2025-01-09T16:26:14.000Z","size":6336,"stargazers_count":1339,"open_issues_count":39,"forks_count":83,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-23T21:02:09.175Z","etag":null,"topics":["components","css-document","react","reactjs","shadow-boundary","shadow-dom","style-encapsulation","webcomponents"],"latest_commit_sha":null,"homepage":"https://react-shadow.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wildhoney.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-02-12T15:48:36.000Z","updated_at":"2025-04-18T07:47:15.000Z","dependencies_parsed_at":"2024-06-21T14:58:52.805Z","dependency_job_id":"055bc805-63cc-4cbc-a3cc-d39a5866ebb8","html_url":"https://github.com/Wildhoney/ReactShadow","commit_stats":{"total_commits":453,"total_committers":30,"mean_commits":15.1,"dds":"0.14569536423841056","last_synced_commit":"c590578c062e4b18e513873da9ca089c763cc0ef"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactShadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactShadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactShadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wildhoney%2FReactShadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wildhoney","download_url":"https://codeload.github.com/Wildhoney/ReactShadow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514768,"owners_count":21443208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css-document","react","reactjs","shadow-boundary","shadow-dom","style-encapsulation","webcomponents"],"created_at":"2024-09-24T14:19:59.640Z","updated_at":"2025-04-23T21:02:10.712Z","avatar_url":"https://github.com/Wildhoney.png","language":"JavaScript","readme":"![ReactShadow](media/logo.png)\n\n\u003e Utilise Shadow DOM in React with all the benefits of style encapsulation.\n\n![Travis](http://img.shields.io/travis/Wildhoney/ReactShadow.svg?style=flat-square)\n\u0026nbsp;\n![Coveralls](https://img.shields.io/coveralls/Wildhoney/ReactShadow.svg?style=flat-square)\n\u0026nbsp;\n![npm](http://img.shields.io/npm/v/react-shadow.svg?style=flat-square)\n\u0026nbsp;\n![License MIT](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat-square)\n\n-   **npm**: `npm i react-shadow`\n-   **yarn**: `yarn add react-shadow`\n-   **Heroku**: [https://react-shadow.herokuapp.com/](https://react-shadow.herokuapp.com) ([alternative](https://react-shadow-2.herokuapp.com))\n\n![Screenshot](media/screenshot.png)\n\n---\n\n## Getting Started\n\nCreating 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 \u0026ndash; for example `root.div` would create a `div` as the host element, and a shadow root as its immediate descendant \u0026mdash; all of the child elements would then be descendants of the shadow boundary.\n\n```jsx\nimport root from 'react-shadow';\nimport styles from './styles.css';\n\nexport default function Quote() {\n    return (\n        \u003croot.div className=\"quote\"\u003e\n            \u003cq\u003eThere is strong shadow where there is much light.\u003c/q\u003e\n            \u003cspan className=\"author\"\u003e― Johann Wolfgang von Goethe.\u003c/span\u003e\n            \u003cstyle type=\"text/css\"\u003e{styles}\u003c/style\u003e\n        \u003c/root.div\u003e\n    );\n}\n```\n\n[![Edit react-shadow](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-shadow-by6bo?fontsize=14)\n\nApplying 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.\n\n```javascript\n{\n    test: /\\.css$/,\n    loader: ['to-string-loader', 'css-loader']\n}\n```\n\nAlternatively 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 \u0026mdash; 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`.\n\n```javascript\nimport root from 'react-shadow/styled-components';\nimport root from 'react-shadow/emotion';\n\n// ...\n\n\u003croot.section /\u003e;\n```\n\nYou 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.\n\n```javascript\nShadowRoot.propTypes = {\n    mode: PropTypes.oneOf(['open', 'closed']),\n    delegatesFocus: PropTypes.bool,\n    styleSheets: PropTypes.arrayOf(\n        PropTypes.instanceOf(globalThis.CSSStyleSheet),\n    ),\n    children: PropTypes.node,\n};\n\nShadowRoot.defaultProps = {\n    mode: 'open',\n    delegatesFocus: false,\n    styleSheets: [],\n    children: null,\n};\n```\n\nIn 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 \u0026ndash; from that you can use `shadowRoot` to access its shadow root if the `mode` has been set to the default `open` value.\n\n```javascript\nconst node = useRef(null);\n\n// ...\n\n\u003croot.section ref={node} /\u003e;\n```\n\nRecently 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 \u0026ndash; as it's experimental, open to sudden spec changes, and React finds it difficult to rehydrate \u0026ndash; by using the `ssr` prop.\n\n```javascript\nconst node = useRef(null);\n\n// ...\n\n\u003croot.section ssr /\u003e;\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwildhoney%2Freactshadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwildhoney%2Freactshadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwildhoney%2Freactshadow/lists"}