{"id":13806646,"url":"https://github.com/BBKolton/reactify-wc","last_synced_at":"2025-05-13T22:30:30.986Z","repository":{"id":35143400,"uuid":"212438670","full_name":"BBKolton/reactify-wc","owner":"BBKolton","description":"Use Web Components with React","archived":false,"fork":false,"pushed_at":"2023-03-06T17:27:26.000Z","size":3234,"stargazers_count":178,"open_issues_count":17,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-19T15:21:08.618Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npmjs.org/reactify-wc","language":"JavaScript","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/BBKolton.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-10-02T20:49:49.000Z","updated_at":"2025-01-22T06:43:30.000Z","dependencies_parsed_at":"2024-05-03T11:14:08.002Z","dependency_job_id":null,"html_url":"https://github.com/BBKolton/reactify-wc","commit_stats":{"total_commits":38,"total_committers":9,"mean_commits":4.222222222222222,"dds":0.2894736842105263,"last_synced_commit":"2a1c077fc700bba757111525dad99c6b044f1cde"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBKolton%2Freactify-wc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBKolton%2Freactify-wc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBKolton%2Freactify-wc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BBKolton%2Freactify-wc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BBKolton","download_url":"https://codeload.github.com/BBKolton/reactify-wc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254036812,"owners_count":22003655,"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-08-04T01:01:14.239Z","updated_at":"2025-05-13T22:30:30.605Z","avatar_url":"https://github.com/BBKolton.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["Integrations"],"readme":"_A Mercedes-Benz R\u0026D North America, Seattle HUB contribution_\r\n\r\n# Reactify Web Component\r\n\r\nUse web components with React properties and functions\r\n\r\n# Usage\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport reactifyWc from \"reactify-wc\";\r\n\r\n// Import your web component. This one defines a tag called 'vaadin-button'\r\nimport \"@vaadin/vaadin-button\";\r\n\r\nconst onClick = () =\u003e console.log(\"hello world\");\r\n\r\nconst VaadinButton = reactifyWc(\"vaadin-button\");\r\n\r\nexport const MyReactComponent = () =\u003e (\r\n  \u003c\u003e\r\n    \u003ch1\u003eHello world\u003c/h1\u003e\r\n    \u003cVaadinButton onClick={onClick}\u003eClick me!\u003c/VaadinButton\u003e\r\n  \u003c/\u003e\r\n);\r\n```\r\n\r\n# Children, Props, Attributes, Functions, and Events\r\n\r\nReact does not handle properties and functions correctly for web components.\r\nThis factory function returns a new React component for a given web component so\r\nyou can use them.\r\n\r\n## Children\r\n\r\nChildren are dropped directly into the web component like normal.\r\n\r\n## Properties and Attributes\r\n\r\n`reactify-wc` checks the passed properties by type to determine where they\r\nshould go. `string`s, `number`s, and `boolean`s are set as attributes on the web\r\ncomponent. All other data besides functions that have a property name that begin\r\nwith `/^on[A-Z]/` and `children` are set as props.\r\n\r\n\u003e Booleans are special! HTML specification states that if an attribute is\r\n\u003e `false`, it should simply not appear. If you need a boolean to appear as a\r\n\u003e property, check the [Forcing Types](#Forcing-Types) section.\r\n\r\n## Functions / Events\r\n\r\nAny `function` that has a property name that starts with `on[A-Z]` or `on-[a-z]`\r\nis stripped of its prefix and added as an event listener. Examples:\r\n\r\n- `onMyEvent` -\u003e `addEventListener(\"myEvent\")`\r\n- `on-my-event` -\u003e `addEventListener(\"my-event\")`\r\n\r\nNote that in the case of `on[A-Z]`, the first letter is `toLowerCase`ed\r\n\r\n```jsx\r\nconst Example = () =\u003e (\r\n  \u003cVaadinButton onClick={handleClick}\u003eClick\u003c/VaadinButton\u003e\r\n  // calls addEventListener('click', handleClick)\r\n  // The 'on' prefix is truncated, and the next char lowercased\r\n\r\n  \u003cVaadinButton on-my-event={handleMyEvent}\u003eClick\u003c/VaadinButton\u003e\r\n  // calls addEventListener('my-event', handleMyEvent)\r\n  // The 'on-' prefix is truncated\r\n\r\n  \u003cVaadinButton functionalProp={functionalProp}\u003eClick\u003c/VaadinButton\u003e\r\n  // adds a prop 'functionalProp' -\u003e functionalProp\r\n)\r\n\r\n```\r\n\r\nEvents passed into the event handlers are browser events, not React\r\nSyntheticEvents.\r\n\r\n## From React to Web Components and Back Again\r\n\r\nYou can mix and match your reactified web components and React components:\r\n\r\n```jsx\r\nconst WriteNames = ({ names }) =\u003e names.map((name) =\u003e \u003cp\u003e{name}\u003c/p\u003e);\r\nconst ReactifiedWc = reactifyWc(\"web-comp\");\r\n\r\nconst names = [\"Bryce\", \"Brion\", \"Pia\", \"Fabian\", \"Larry\"];\r\n\r\nconst MyComponent = () =\u003e (\r\n  \u003cReactifiedWc\u003e\r\n    \u003cWriteNames names={names} /\u003e\r\n  \u003c/ReactifiedWc\u003e\r\n);\r\n```\r\n\r\n## Forcing Types\r\n\r\nYou can force any named property to be an event listener, property, attribute, or any\r\ncombination of the three. This behavior is most useful for custom boolean\r\nbehavior. For most cases, you will not need to force a type.\r\n\r\n```jsx\r\nimport React from \"react\";\r\nimport reactifyWc from \"reactify-wc\";\r\n\r\n// Import your web component. This one defines a tag called 'my-element'\r\nimport \"@vaadin/vaadin-button\";\r\n\r\nconst VaadinButton = reactifyWc(\"my-element\", {\r\n  forceProperty: [\"setMeAsAProp\"],\r\n  forceAttribute: [\"setMeAsAnAttribute\"],\r\n  forceEvent: [\"setMeAsAnEventListener\"],\r\n});\r\n\r\nexport const MyReactComponent = () =\u003e (\r\n  \u003cVaadinButton\r\n    setMeAsAProp=\"value\"\r\n    setMeAsAnAttribute={[]}\r\n    setMeAsAnEventListener={() =\u003e {}}\r\n  \u003e\r\n    Click me!\r\n  \u003c/VaadinButton\u003e\r\n);\r\n```\r\n\r\n## Styling\r\n\r\nFeel free to use React's `style` attribute (or other packages like Styled\r\nComponents) to style your content. The example below will make the button text\r\ncolor red.\r\n\r\n```jsx\r\nconst VaadinButton = reactify(\"vaadin-button\");\r\n\r\nexport const MyReactComponent = () =\u003e (\r\n  \u003cVaadinButton onClick={onClick} style={{ color: \"red\" }}\u003e\r\n    Click me!\r\n  \u003c/VaadinButton\u003e\r\n);\r\n```\r\n\r\n\u003e Remember that some web components are in shadow DOMs and are _not_ stylable\r\n\u003e from the outside. Content injected as children is always stylable.\r\n\r\n# Composability Details\r\n\r\nMany web components are \"composable,\" meaning that in order to get a desired\r\nfunctionality, you may need to put multiple tags together or inside one another.\r\nTechnically speaking, when using `reactify-wc`, only top level web components\r\nand components that have direct React integration need to be reactified. For\r\nreadability and ease of use, we recommend reactifying all web components if\r\npossible.\r\n\r\n```jsx\r\n// Preferred method\r\n\r\nconst VaadinGrid = reactifyWc(\"vaadin-grid\");\r\nconst VaadinGridColumn = reactifyWc(\"vaadin-grid-column\");\r\n\r\nconst MyReactComponent = () =\u003e (\r\n  \u003cVaadinGrid items={items}\u003e\r\n    \u003cVaadinGridColumn path=\"name.first\" header=\"First name\" onClick={onClick} /\u003e\r\n    \u003cVaadinGridColumn path=\"name.last\" header=\"Last name\" /\u003e\r\n  \u003c/VaadinGrid\u003e\r\n);\r\n```\r\n\r\n```jsx\r\n// Will work, not preferred\r\n\r\nconst VaadinGrid = reactifyWc(\"vaadin-grid\");\r\n\r\nconst MyReactComponent = () =\u003e (\r\n  \u003cVaadinGrid items={items}\u003e\r\n    \u003cvaadin-grid-column path=\"name.first\" header=\"First name\" /\u003e\r\n    \u003cvaadin-grid-column path=\"name.last\" header=\"Last name\" /\u003e\r\n  \u003c/VaadinGrid\u003e\r\n);\r\n```\r\n\r\n```jsx\r\n// Will work, not preferred\r\n\r\nconst VaadinGrid = reactifyWc(\"vaadin-grid\");\r\nconst VaadinGridColumn = reactifyWc(\"vaadin-grid-column\");\r\n\r\nconst MyReactComponent = () =\u003e (\r\n  \u003cVaadinGrid items={items}\u003e\r\n    \u003cVaadinGridColumn path=\"name.first\" header=\"First Name\" onClick={onClick} /\u003e\r\n    \u003cvaadin-grid-column path=\"name.last\" header=\"Last Name\" /\u003e\r\n  \u003c/VaadinGrid\u003e\r\n);\r\n```\r\n\r\n# Testing and Examples\r\n\r\nThere is now a small test page filled with example web components and basic\r\ntests, available in the test folder. View the tests cloning the repo and\r\nrunning:\r\n\r\n```bash\r\ncd test;\r\nnpm install;\r\nnpm start;\r\n```\r\n\r\n# Contribute\r\n\r\nContribute to the project in our git repo by opening a PR with changes. We have\r\nno official contribution guide yet.\r\n\r\n# Roadmap\r\n\r\n1. Add Cypress to testing suite.\r\n2. Do some deep comparison between the changing props, attributes, and especially\r\n   event handlers so that we aren't setting and removing them on every\r\n   `componentDidUpdate`.\r\n3. Add CI/CD pipeline to GitHub.\r\n\r\n# Credits\r\n\r\nThis software was created in-house at\r\nMercedes-Benz Research \u0026 Development North America, Seattle HUB. This software is provided\r\nunder the MIT license. [We're hiring](https://www.mbusa.com/en/careers)!\r\n\r\n![Mercedes-Benz\r\nlogo](https://www.mbusa.com/etc/designs/mb-nafta/images/Mercedes_Benz__logo--desktop.png)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBBKolton%2Freactify-wc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBBKolton%2Freactify-wc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBBKolton%2Freactify-wc/lists"}