{"id":15099548,"url":"https://github.com/marcisbee/better-react-web-component","last_synced_at":"2026-02-12T16:03:27.147Z","repository":{"id":187229931,"uuid":"676442750","full_name":"Marcisbee/better-react-web-component","owner":"Marcisbee","description":"Wrapper for React Component to CustomElement","archived":false,"fork":false,"pushed_at":"2025-02-18T08:52:13.000Z","size":106,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T13:00:03.730Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Marcisbee.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":"2023-08-09T07:58:36.000Z","updated_at":"2025-02-18T08:51:49.000Z","dependencies_parsed_at":"2024-06-12T10:37:56.545Z","dependency_job_id":"0edd6eaa-ae51-4aef-9016-7795eb8a0887","html_url":"https://github.com/Marcisbee/better-react-web-component","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"ed79500ea54e5564f59a6659852babc115555c8f"},"previous_names":["marcisbee/better-react-web-component"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fbetter-react-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fbetter-react-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fbetter-react-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fbetter-react-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marcisbee","download_url":"https://codeload.github.com/Marcisbee/better-react-web-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319598,"owners_count":21570426,"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":"2024-09-25T17:23:10.305Z","updated_at":"2026-02-12T16:03:22.125Z","avatar_url":"https://github.com/Marcisbee.png","language":"TypeScript","readme":"# Better React Web Component\n\n\u003ca href=\"https://github.com/Marcisbee/better-react-web-component/actions\"\u003e\n  \u003cimg alt=\"CI\" src=\"https://img.shields.io/github/actions/workflow/status/Marcisbee/better-react-web-component/main.yml?branch=main\u0026style=flat-square\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/better-react-web-component\"\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/better-react-web-component?style=flat-square\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=better-react-web-component\"\u003e\n  \u003cimg alt=\"package size\" src=\"https://deno.bundlejs.com/badge?q=better-react-web-component\u0026config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}}\u0026badge-style=flat-square\" /\u003e\n\u003c/a\u003e\n\nWrapper for React (v18.x) Component to CustomElement that magically just works and is type safe with Typescript!\n\n- __Small__. About 1kB (minified and gzipped). Zero dependencies.\n- __Simple__. Each component interface is defined with strict types.\n- Good __TypeScript__ support.\n\n```tsx\nimport { createCustomElement, InferProps, optional } from 'better-react-web-component'\n\n// Define custom component interface\nHelloComponent.types = {\n  name: optional.string,\n}\n\n// Infer typescript types\ntype ComponentProps = InferProps\u003ctypeof HelloComponent.types\u003e\n\n// Defined component\nfunction HelloComponent({ name = \"unknown\" }: ComponentProps) {\n  return (\n    \u003ch1\u003eHello {name}!\u003c/h1\u003e\n  )\n}\n\n// Create and register custom component\ncustomElements.define(\n  \"hello-component\",\n  createCustomElement(HelloComponent, \"shadowRoot\"),\n)\n```\n\nUsage in html:\n\n```html\n\u003chello-component name=\"World\" /\u003e\n```\n\n[Open this demo in dune.land](https://dune.land/dune/08fcf962-8633-4ba4-b10f-fe3686573115)\n\n# Install\n\n```sh\nnpm install better-react-web-component\n```\n\n# Guide\n\n## Define attributes\nAttributes are defined on component `types` object.\n\n\u003e **Note**\n\u003e Attribute names defined here are case-insensitive as they are in HTML spec!\n\u003e Hence the below can be used as `\u003ccomponent name=\"...\" /\u003e` or `\u003ccomponent nAmE=\"...\" /\u003e`.\n\n```ts\nMyReactComponent.types = {\n  name: optional.string,\n  requiredName: required.string,\n}\n```\n\n### Supported prop types:\n- String:\n\t- `optional.string`\n\t- `required.string`\n- Number:\n\t- `optional.number`\n\t- `required.number`\n- Boolean:\n\t- `optional.boolean`\n\t- `required.boolean`\n- Json (parses attribute with JSON.parse):\n\t- `optional.json`\n\t- `required.json`\n- Function:\n\t- `optional.event`\n\t- `required.event`\n\n## Define default values\nDefault values are defined on react component itself.\n```ts\nfunction MyReactComponent({\n  requiredName,\n  name = \"unknown\",\n}: InferProps\u003ctypeof MyReactComponent.types\u003e) {\n  ...\n}\n```\n\n## Handle json/object values\nIn webcomponent space there is no object type to be passed as value. Instead we can pass json object as string and then parse it in react component. For this we can use `optional.json` or `required.json` (it does parsing automatically so component will receive object not string).\n\nAnd for Typescript to have proper types we can use `InferProps` feature to replace/update properties like json values.\n```ts\nMyReactComponent.types = {\n  custom: required.json,\n}\n\ntype Props = InferProps\u003ctypeof MyReactComponent.types, {\n  custom: {\n    foo: string;\n    bar: number;\n  }\n}\u003e\n```\n\nThen in component this object can be passed as string\n```html\n\u003cmy-react-component custom='{\"foo\":\"one\",\"bar\":2}' /\u003e\n```\n\n## Handle events\nThis package also supports custom events to be defined.\n\n\u003e **Note**\n\u003e Event names defined here are __CASE-SENSITIVE__ so we lowercase them and remove leading `\"on\"` to match other event names!\n\n```tsx\nimport { createCustomElement, InferProps, optional } from 'better-react-web-component'\nimport { useState } from 'react'\n\nInputName.types = {\n  name: optional.string,\n  onNameChange: optional.event, // Event name must start with \"on\" and will be lowercase in html land\n}\n\nfunction InputName({\n  name = 'unknown',\n  onNameChange,\n}: InferProps\u003ctypeof InputName.types\u003e) {\n  const [localName, setLocalName] = useState(name)\n\n  return (\n    \u003cinput\n      value={localName}\n      onChange={(e) =\u003e {\n        setLocalName(e.target.value)\n        onNameChange?.({ detail: e.target.value }) // Trigger custom event here if it's defined\n      }}\n    /\u003e\n  )\n}\n\ncustomElements.define('input-name', createCustomElement(InputName))\n```\n\nAt the same time in html land:\n\n```html\n\u003cinput-name name=\"World\" /\u003e\n\u003cscript\u003e\n  const inputNameEl = document.querySelector('input-name');\n\n  // Note that event name is ALWAYS lowercase without `on` in front of it\n  inputNameEl.addEventListener('namechange', (e) =\u003e {\n    console.log(e.detail);\n  });\n\u003c/script\u003e\n```\n\n[Open this demo in dune.land](https://dune.land/dune/ad3ae58f-876e-4f25-9ee2-c1262cd68d3e)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcisbee%2Fbetter-react-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcisbee%2Fbetter-react-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcisbee%2Fbetter-react-web-component/lists"}