{"id":22771010,"url":"https://github.com/SIL0RAK/convert-react-to-web-component","last_synced_at":"2025-08-09T08:31:23.851Z","repository":{"id":39649769,"uuid":"267388180","full_name":"SIL0RAK/convert-react-to-web-component","owner":"SIL0RAK","description":"Convert React component to web component without breaking a sweat.","archived":false,"fork":false,"pushed_at":"2023-03-15T08:22:27.000Z","size":969,"stargazers_count":19,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-22T12:57:04.481Z","etag":null,"topics":["javascript","legacy","microfrontend","react","tpl","twig","webcomponent"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/convert-react-to-web-component","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SIL0RAK.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-05-27T17:49:08.000Z","updated_at":"2024-05-30T17:47:24.000Z","dependencies_parsed_at":"2024-06-21T14:12:55.144Z","dependency_job_id":"7489bd4f-962e-442b-a482-7aea81ab758e","html_url":"https://github.com/SIL0RAK/convert-react-to-web-component","commit_stats":null,"previous_names":["sil0rak/react-web-component"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/SIL0RAK/convert-react-to-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SIL0RAK%2Fconvert-react-to-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SIL0RAK%2Fconvert-react-to-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SIL0RAK%2Fconvert-react-to-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SIL0RAK%2Fconvert-react-to-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SIL0RAK","download_url":"https://codeload.github.com/SIL0RAK/convert-react-to-web-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SIL0RAK%2Fconvert-react-to-web-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269527523,"owners_count":24432437,"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-08-09T02:00:10.424Z","response_time":111,"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":["javascript","legacy","microfrontend","react","tpl","twig","webcomponent"],"created_at":"2024-12-11T16:11:44.688Z","updated_at":"2025-08-09T08:31:23.542Z","avatar_url":"https://github.com/SIL0RAK.png","language":"TypeScript","readme":"![npm](https://img.shields.io/npm/v/convert-react-to-web-component)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/SIL0RAK/convert-react-to-web-component)\n\n# React to Web Component\n\n  This library is meant to make maintaining legacy code less painful. Micro frontend will reduce your legacy core complexity enabling you to integrate React (application/widgets) in it.\n  \n  **Warning**\n  This library is not tested with react 18.\n\n# Install\n\n    npm install convert-react-to-web-component\n    \n or\n\n    yarn add convert-react-to-web-component\n\nand don't forget to install peer dependencies:\n    \n   * react\n   * react-dom\n\n# Usage\n\n```javascript\nimport React from 'react';\nimport reactToWebComponent from 'convert-react-to-web-component';\n\nconst ReactApp = () =\u003e \u003cdiv\u003eHello, world\u003c/div\u003e;\n\nreactToWebComponent(ReactApp);\n```\n\nthis snippet will create `\u003creact-app\u003e` tag that can be used in plain html, angular template or twig.\n\n## Attributes\n\nTo pass tag attributes to React component you have to specify them.\n\n```javascript\nimport React from 'react';\nimport reactToWebComponent from 'convert-react-to-web-component';\n\nconst ReactApp = ({ name, userLastName }) =\u003e (\n  \u003cdiv\u003eHello, {name} {userLastName}\u003c/div\u003e\n);\n\nreactToWebComponent(ReactApp, { attributes: ['name', 'userLastName'] });\n```\n\nAttributes should be passed as kebab-case to your element.\n\n```html\n  \u003cdiv\u003e\n    \u003creact-app name=\"john\" user-last-name=\"Cena\"\u003e\n  \u003c/div\u003e\n```\n\nReact component will rerender on attribute change.\n\n## Tag name\n\nBy default created tag name will be given React component name converted to `kebab-case`. You can change name of tab by specifying your desired name.\n\n```javascript\nimport React from 'react';\nimport reactToWebComponent from 'convert-react-to-web-component';\n\nconst ReactApp = ({ name }) =\u003e \u003cdiv\u003eHello, {name}\u003c/div\u003e;\n\nreactToWebComponent(ReactApp, { attributes: ['name']; name: 'app' });\n```\n\nnow you can call you component with `\u003capp\u003e` tag.\n\n## Attribute modifier (middleware)\n\nIn some cases, you may want to use middleware to modify value before it is passed to React component. This can be useful when implementing functionality in twig or angular apps.\n\n```javascript\nimport React from 'react';\nimport reactToWebComponent from 'convert-react-to-web-component';\n\nconst ReactApp = ({ name }) =\u003e \u003cdiv\u003eHello, {name}\u003c/div\u003e;\n\nconst middleware = (value) =\u003e (\n    value.includes('{') ? undefined : value\n);\n\nreactToWebComponent(ReactApp, { attributes: ['name'], middleware });\n```\n## Shadow DOM\n\n\n To prevent style interference between parent application and your react app you can pass `shadowDom` property which will create shadow root and mount react app to it.\n\n```javascript\nimport React from 'react';\nimport reactToWebComponent from 'convert-react-to-web-component';\n\nconst ReactApp = () =\u003e \u003cdiv\u003eHello, World\u003c/div\u003e;\n\nreactToWebComponent(ReactApp, { shadowDom: \"open\" });\n```\n\n# Additional stuff\n\nIf you came this far and read all that stuff above you may be planning to use this lib. If this is the case you may want to see a demo. But let's be honest I know you are pro, and you will definitely check out `package.json` to see what is available.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSIL0RAK%2Fconvert-react-to-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSIL0RAK%2Fconvert-react-to-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSIL0RAK%2Fconvert-react-to-web-component/lists"}