{"id":24842983,"url":"https://github.com/moebiusmania/react-webcomponents","last_synced_at":"2025-12-30T21:17:29.785Z","repository":{"id":150234393,"uuid":"125985211","full_name":"moebiusmania/react-webcomponents","owner":"moebiusmania","description":"Some examples of integrating Web Components within a React application.","archived":false,"fork":false,"pushed_at":"2023-10-25T13:53:16.000Z","size":9955,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-04T02:47:02.795Z","etag":null,"topics":["components","example","integration","javascript","react","webcomponents"],"latest_commit_sha":null,"homepage":"https://moebiusmania.github.io/react-webcomponents","language":"TypeScript","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/moebiusmania.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}},"created_at":"2018-03-20T08:32:10.000Z","updated_at":"2022-07-05T10:41:08.000Z","dependencies_parsed_at":"2025-01-31T08:45:49.770Z","dependency_job_id":null,"html_url":"https://github.com/moebiusmania/react-webcomponents","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/moebiusmania/react-webcomponents","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moebiusmania%2Freact-webcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moebiusmania%2Freact-webcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moebiusmania%2Freact-webcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moebiusmania%2Freact-webcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moebiusmania","download_url":"https://codeload.github.com/moebiusmania/react-webcomponents/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moebiusmania%2Freact-webcomponents/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278606354,"owners_count":26014616,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","example","integration","javascript","react","webcomponents"],"created_at":"2025-01-31T08:35:16.018Z","updated_at":"2025-10-06T11:50:04.913Z","avatar_url":"https://github.com/moebiusmania.png","language":"TypeScript","readme":"# React \u0026 WebComponents\n\n\u003e Some examples of integrating Web Components within a React application.\n\nBuilt on top of the [Vite.js React + TS](https://vitejs.dev/guide/#trying-vite-online) template.\n\nIt also uses vanilla [CSS Modules](https://github.com/css-modules/css-modules) to share the styles between React components and Web Components.\n\n### Introduction\n\nAs the [official React documentation](https://reactjs.org/docs/web-components.html#using-web-components-in-react) states, you **can** use Web Components within a React application.\n\nWithout additional code or techniques, Web Components are rendered inside the React Application as regular HTML elements, what is missing seamless integration between the two.\n\nWhile this is being discussed (_and hopefully, implemented in a near future_) by the React team, as of React v16 you can manually implement the integration with a few lines of code.\n\n### Data binding\n\nTo pass simple data type from React to a Web Component you can easily use React's data binding system:\n\n```typescript\n// Component.tsx\nconst [text, setText] = useState\u003cstring\u003e(\"hey there!\");\n\nreturn (\n  \u003cdiv className=\"widget\"\u003e\n    \u003cmy-element text={text}\u003e\u003c/my-element\u003e\n  \u003c/div\u003e\n);\n```\n\nWhen it comes to `object` or `array` it will not work, a string conversion will be necessary:\n\n```typescript\n// Component.tsx\nconst [list, setList] = useState\u003cstring[]\u003e([\"red\", \"green\", \"blue\"]);\n\nconst stringed: string = JSON.stringify(list);\n\nreturn (\n  \u003cdiv className=\"widget\"\u003e\n    \u003cmy-element list={stringed}\u003e\u003c/my-element\u003e\n  \u003c/div\u003e\n);\n```\n\non the Web component side you will have to decode it back to data using `JSON.parse()`, but since this is a limitation of the spec itself chances are that this is already happening or that the component is authored with a framework (_like Lit, Svelte, Stencil, ecc.._) that handle the issue.\n\n### Events\n\nReact uses a _synthetic_ event system while Web Components work with standard events extended with custom ones, so out-of-the-box they don't cooperate between each other.\n\nBut since React is built on top of Javascript you can use the `.addEventListener()` API to listen for events from DOM nodes. In order to get DOM elements without using the `.querySelector()` api you can use React's `useRef` hook to achieve the result:\n\n```typescript\n// Component.tsx\nconst customElement = useRef\u003cHTMLElement\u003e(null);\n\nconst doSomething = (event: Event): void =\u003e { ... }\n\nuseEffect(() =\u003e {\n  customElement?.current?.addEventListener(\"my-event\", doSomething)\n\n  return () =\u003e {\n    customElement?.current?.removeEventListener(\"my-event\", doSomething)\n  }\n}, [])\n\nreturn(\n  \u003cdiv className=\"widget\"\u003e\n    \u003cmy-element\n      ref={customElement}\n    \u003e\u003c/my-element\u003e\n  \u003c/div\u003e\n)\n```\n\nThe most annoying part of this workaround is that you have to manually listen for events and, for performance reasons, manually remove the listener when the React's parent is being removed from the DOM.\n\n---\n\n### Run locally\n\nA few steps to quick-start the project:\n\nClone the repo on your machine, then\n\n```\n$ npm ci\n```\n\nto install dependencies, and\n\n```\n$ npm run dev\n```\n\nto start webserver on `localhost:3000`\n\n### License\n\nReleased under the [MIT license](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoebiusmania%2Freact-webcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoebiusmania%2Freact-webcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoebiusmania%2Freact-webcomponents/lists"}