{"id":29374958,"url":"https://github.com/junip/minimal-react-web-component","last_synced_at":"2025-07-09T20:32:16.144Z","repository":{"id":302142804,"uuid":"1011407803","full_name":"junip/minimal-react-web-component","owner":"junip","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-30T19:41:48.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-30T20:28:36.610Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://minimal-react-web-component.vercel.app","language":"JavaScript","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/junip.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,"zenodo":null}},"created_at":"2025-06-30T19:11:41.000Z","updated_at":"2025-06-30T19:41:51.000Z","dependencies_parsed_at":"2025-06-30T20:39:50.627Z","dependency_job_id":null,"html_url":"https://github.com/junip/minimal-react-web-component","commit_stats":null,"previous_names":["junip/minimal-react-web-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/junip/minimal-react-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junip%2Fminimal-react-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junip%2Fminimal-react-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junip%2Fminimal-react-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junip%2Fminimal-react-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junip","download_url":"https://codeload.github.com/junip/minimal-react-web-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junip%2Fminimal-react-web-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264502642,"owners_count":23618663,"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":[],"created_at":"2025-07-09T20:30:48.667Z","updated_at":"2025-07-09T20:32:16.131Z","avatar_url":"https://github.com/junip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# minimal-react-web-component\n\nThis repo serves as a template and exmaple for defining react components as custom html elements that you can call in ANY html file. Package deps are set to exact so you know what versions I used. I added a couple 3rd party libraries like material-ui and tanstack query to showcase how well this works with really any setup.\n\n## Prereqs\n\nNode 22 or higher\n\n## Setup\n\n1. Clone this repo and cd into new directory\n2. Run `npm i` in console\n3. Run `npm run build` in console\n4. Open `test-built-web-components.html` in browser of your choice\n5. See your beautiful react components as custom html tags\n\n## Making your own web components\nNOTE: While you're developing your components, you can run `npm run dev` to see your changes in real time.\n\nTo create your own components, follow this example:\n1. Create a folder in the `components` directory, like `my-component`\n2. Create a `MyComponent.tsx` file in the new folder and build your React component as normal\ne.g. In `MyComponent.tsx`, follow this example:\n```\n      export default function MyComponent() {\n        return (\n            \u003cdiv\u003e\n                \u003ch1\u003eMy Component\u003c/h1\u003e\n                \u003cp\u003eHere is some text\u003c/p\u003e\n            \u003c/div\u003e\n        );\n      }\n```\n3. Create a new file, `my-component.ts` in the `webcomponents` directory\n4. In the new `my-component.ts`, add the following code:\n  ```\n  import r2wc from \"@r2wc/react-to-web-component\";\n  import MyComponent from \"../components/my-component/MyComponent\";\n  \n  const component = r2wc(MyComponent, { props: {} });\n  \n  customElements.define(\"my-component\", component);\n  ```\n5. In `vite-build.mjs`, add this code somewhere:\n  ```\n  const myComponentWCConfig = {\n    plugins: [],\n    entry: path.resolve(__dirname, \"./webcomponents/my-component.ts\"),\n    name: \"my-component\",\n    formats: [\"umd\"],\n  };\n  ```\nIn the `buildLibraries` function near the bottom, add `viteBuild(getConfiguration(myComponentWCConfig, mode))` like:\n```\n...\n  await Promise.all([].concat(\n    ...[\"lite\", \"full\"].map(mode =\u003e [\n    viteBuild(getConfiguration(myComponentWCConfig, mode))\n    ]),\n    [viteBuild(getConfiguration(dependenciesConfig, \"full\"))]\n  ));\n...\n```\n6. Run `npm run build`\n7. `my-component.full.umd.js` will be generated in the `dist` folder, To add this to an html file, follow this example:\n  ```\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\"\u003e\n        \u003ctitle\u003eWeb Components\u003c/title\u003e\n    \n        \u003cscript src=\"dist/my-component/my-component.full.umd.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cmy-component\u003e\u003c/my-component\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n  ```\n8. Open the html file in a browser and enjoy react as an html tag\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunip%2Fminimal-react-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunip%2Fminimal-react-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunip%2Fminimal-react-web-component/lists"}