{"id":14990311,"url":"https://github.com/a7ul/react-webcomponentify","last_synced_at":"2025-09-24T00:31:59.515Z","repository":{"id":42221388,"uuid":"167705120","full_name":"a7ul/react-webcomponentify","owner":"a7ul","description":"Build Web Components with React or Preact (without any extra effort)","archived":false,"fork":false,"pushed_at":"2024-07-15T02:07:57.000Z","size":902,"stargazers_count":69,"open_issues_count":11,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-08T02:09:35.754Z","etag":null,"topics":["javascript-library","openlibrary","react","reactjs","web-component","webcomponents"],"latest_commit_sha":null,"homepage":"https://a7ul.github.io/webcomponents-with-react-webcomponentify","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/a7ul.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":"2019-01-26T15:37:51.000Z","updated_at":"2024-12-04T02:26:41.000Z","dependencies_parsed_at":"2024-06-21T13:07:47.894Z","dependency_job_id":"b0884420-29ca-4e1c-ac05-3791761628b3","html_url":"https://github.com/a7ul/react-webcomponentify","commit_stats":{"total_commits":40,"total_committers":5,"mean_commits":8.0,"dds":"0.22499999999999998","last_synced_commit":"53e10c145ef9e431b2ace46d942511a7f263eb97"},"previous_names":["master-atul/react-webcomponentify"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-webcomponentify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-webcomponentify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-webcomponentify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-webcomponentify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a7ul","download_url":"https://codeload.github.com/a7ul/react-webcomponentify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234017047,"owners_count":18766444,"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":["javascript-library","openlibrary","react","reactjs","web-component","webcomponents"],"created_at":"2024-09-24T14:19:52.415Z","updated_at":"2025-09-24T00:31:54.071Z","avatar_url":"https://github.com/a7ul.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-webcomponentify\n\n[![npm version](https://badge.fury.io/js/react-webcomponentify.svg)](https://badge.fury.io/js/react-webcomponentify)\n\n\u003cimg src=\"https://github.com/a7ul/react-webcomponentify/blob/master/assets/react-webcomponent.png\" width=\"200\" height=\"auto\" alt=\"logo\" style=\"display:block; margin:0 auto;\"/\u003e\n\n**Build and export React Components as Web Components without any extra effort.**\n\nSize = [~1.5kB after gzip](https://bundlephobia.com/package/react-webcomponentify)\n\n_\\* works nicely with preact aswell: See demo_\n\n## Show me live demo?\n\n- Demo Link: \u003chttps://a7ul.github.io/webcomponents-with-react-webcomponentify/\u003e\n- Demo source code (recommended): \u003chttps://github.com/a7ul/webcomponents-with-react-webcomponentify\u003e\n\n### Table of Contents\n\n- [Use cases](#use-cases)\n- [Install](#install)\n- [Usage](#usage)\n  - [Basic](#basic)\n  - [Advanced](#advanced)\n    - [Sending non string props to react](#sending-non-string-props-to-react)\n    - [What about child elements?](#what-about-child-elements)\n  - [TypeScript support](#typescript-support)\n- [Maintainers](#maintainers)\n\n## Use cases\n\n- **Export existing react components as web components** so you can use them with Vue or Angular.\n- **Use react's rich api to build web components** with state management, etc. Instruction on how to do exactly that and Live Demo here: \u003chttps://github.com/a7ul/webcomponents-with-react-webcomponentify\u003e\n- Lets say you are writing a component library with web components but you already have a huge collection of component in react.You can use this library to generate a component library with the existing components. And then safely continue to rewrite each one of them behind the scene. This makes sure other teams are not waiting for you to finish.\n- For more crazy people - You can even export your entire react app as a web component and embed it into another app made with Angular or Vue. So you can keep writing newer parts of code in react while keeping your legacy code working on the side.\n- Maybe (not tried) you can embed another old react app (wrapped with this module) inside ur current react app.\n\n## Install\n\n```bash\nnpm install react-webcomponentify\n```\n\nor\n\n```bash\nyarn add react-webcomponentify\n```\n\n## Usage\n\n### Basic\n\n**Simple use case**\n\n```js\nimport React from \"react\";\nimport { registerAsWebComponent } from \"react-webcomponentify\";\n\nexport const ExampleReactComponent = () =\u003e {\n  return \u003cdiv\u003e Hello \u003c/div\u003e;\n};\n\nregisterAsWebComponent(ExampleReactComponent, \"example-component\");\n```\n\nIn HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  ....\n  \u003cbody\u003e\n    \u003cexample-component /\u003e\n  \u003c/body\u003e\n  ....\n\u003c/html\u003e\n```\n\n### Advanced\n\n#### Sending non string props to react\n\nYou can send serializable string props via the html attributes itself. But for props like callback functions or complex objects you can use the `setProps` method on the element as shown below.\n\n```js\nimport React from \"react\";\nimport { registerAsWebComponent } from \"react-webcomponentify\";\n\nexport const ButtonComponent = props =\u003e {\n  return (\n    \u003cdiv\u003e\n      Hello \u003cbutton onClick={props.onClick}\u003e{props.text}\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nregisterAsWebComponent(ButtonComponent, \"button-web\");\n```\n\nIn HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  ....\n  \u003cbody\u003e\n    \u003cbutton-web text=\"click me\" id=\"mybutton\" /\u003e\n  \u003c/body\u003e\n  ....\n  \u003cscript\u003e\n    const myBtn = document.getElementById(\"mybutton\");\n    myBtn.setProps({\n      onClick: () =\u003e console.log(\"btn was clicked\")\n    });\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\nEvery custom component built using react-webcomponentify will have an instance method `setProps`\n\n```js\nelement.setProps({\n  ....\n  /* set the props here that you want to send to react */\n  ....\n})\n```\n\n#### What about child elements?\n\nThats possible too 😎\n\n```js\nimport React from \"react\";\nimport { registerAsWebComponent } from \"react-webcomponentify\";\n\n// You access the children just like you would in react (using this.props.children)\nexport const ComponentWithChild = props =\u003e {\n  return (\n    \u003cdiv\u003e\n      Hello World\n      {this.props.text}\n      \u003cdiv\u003e{this.props.children}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nregisterAsWebComponent(ComponentWithChild, \"component-with-child\");\n```\n\nIn HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  ....\n  \u003cbody\u003e\n    \u003ccomponent-with-child text=\"I love children\"\u003e\n      \u003cp\u003eSome child\u003c/p\u003e\n    \u003c/component-with-child\u003e\n  \u003c/body\u003e\n  ....\n\u003c/html\u003e\n```\n\nThis will send `\u003cp\u003eSome Child\u003c/p\u003e` via this.props.children to the React component `ComponentWithChild`.\nNote that `\u003cp\u003eSome Child\u003c/p\u003e` is a dom node and not a react component. So it will be wrapped with a simple react component found here: https://github.com/a7ul/react-webcomponentify/blob/master/src/react-dom-child.js\nBut for implementation purposed use it like a regular child component.\n\n### TypeScript support\n\nThis library is written in TypeScript. All declarations are included.\n\n## Maintainers\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/a7ul\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4029423?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAtul R\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kopach\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8749624?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e\nIhor\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa7ul%2Freact-webcomponentify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa7ul%2Freact-webcomponentify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa7ul%2Freact-webcomponentify/lists"}