{"id":28789571,"url":"https://github.com/lemoncode/webcomponents-react","last_synced_at":"2025-07-23T23:05:10.724Z","repository":{"id":81411447,"uuid":"155745139","full_name":"Lemoncode/webcomponents-react","owner":"Lemoncode","description":null,"archived":false,"fork":false,"pushed_at":"2019-02-11T09:45:08.000Z","size":261,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-17T22:11:30.949Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Lemoncode.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":"2018-11-01T16:39:23.000Z","updated_at":"2019-02-11T09:45:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"a9b0e751-d764-4b9f-bf8d-711d377b2db8","html_url":"https://github.com/Lemoncode/webcomponents-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lemoncode/webcomponents-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebcomponents-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebcomponents-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebcomponents-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebcomponents-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/webcomponents-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebcomponents-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266764847,"owners_count":23980644,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":[],"created_at":"2025-06-17T22:11:04.816Z","updated_at":"2025-07-23T23:05:10.712Z","avatar_url":"https://github.com/Lemoncode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web components\n\nWeb components are a set of web platform APIs that allow you to create new custom HTML tags to use in web pages and web apps whatever it's the Javascript framework, library or Vanilla JS you use for your apps.\n\nBut, is it possible to use Web Components in React or React to create Web components?\n\nAccording to [React documentation](https://reactjs.org/docs/web-components.html): \"React and Web Components are built to solve different problems... As a developer, you are free to use React in your Web Components, or to use Web Components in React or both\"\n\nWe could start to play with some simple examples to know limitations about that.\n\n# Conclusions\n\nWhen we are working with `web components` (naming too `custom-elements`) we have to think about two different ways:\n\n- Create web component\n- Use web component\n\nThat means, we could create a web component with one technology and consume it with other one (as we did on samples _03 Using web components in Preact_).\n\n### Create WC with React\n\nRight now, it exists several `tools / libraries` to `create` web components:\n\n- [Todo-list app](https://wc-todo.firebaseapp.com/): show a todo-list app implemented with different tools.\n- And the [syntax differences](https://github.com/shprink/web-components-todo#-syntax-differences)\n\nIf we want use React for that purpose:\n\n- Official React support: there is a [RFC: Plan for custom elements in React 17](https://github.com/facebook/react/issues/11347) with some proposals like below but it isn't confirmed yet.\n\n  ```javascript\n    const XFoo = ReactDOM.createCustomElementType({\n      element: ‘x-foo’,\n      ‘my-attr’: // something that tells React what to do with it\n      someRichDataProp: // something that tells React what to do with it\n    });\n  ```\n\n- [Skatejs + React](https://skatejs.netlify.com/renderers/with-react): you could implement your components with React and then use a `wrapper` to expose web components props, etc. `Skatejs` has other renders like `Preact` or `LitHTML`.\n\n- [Reactive elements](https://github.com/PixelsCommander/ReactiveElements): `0.10.0v`. Similar lib with `wrapper` over React component but with some special properties like `reactive-elements-no-boolean-transform`.\n\n- [React-web-component](https://github.com/spring-media/react-web-component): `1.3.0v`. It has the `wrapper` and the possibility to use [WC lifecycle](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) methods inside React components.\n\n### Use WC on React\n\nIn previous examples, we saw that React supports `only primitive data` pass down through properties. That means we can not pass objects, arrays or callbacks. We have even noted that handling events with React and WC could be cumbersome due to we have to use a workaround to listen events like we saw on _02 Simple Form_ example:\n\n```javascript\nexport class Form extends Component {\n  nameRef = React.createRef();\n\n  componentDidMount() {\n    this.nameRef.current.addEventListener('input', this.onChangeNameHandler);\n  }\n\n  onChangeNameHandler = e =\u003e {\n    const value = e.target.value;\n    this.props.onFieldChange('name', value);\n  };\n\n  render() {\n    return (\n      \u003cform\u003e\n        \u003cwired-input\n          ref={this.nameRef}\n          placeholder=\"Name\"\n          value={this.props.user.name}\n        /\u003e\n      ...\n    );\n  }\n}\n```\n\n- [Unit test for React WC support](https://custom-elements-everywhere.com/libraries/react/results/results.html)\n\nIf we using Preact, we can pass rich data like objects or arrays. Also, we can handle events in a declarative way like:\n\n```javascript\n\u003cmy-component\n  oncustomevent={this.handleCustomEvent}\n  oncustom-event={this.handleCustomEvent}\n/\u003e\n```\n\nBut it doesn't support `camelCase` syntax. [Unit test for Preact WC support](https://custom-elements-everywhere.com/libraries/preact/results/results.html)\n\n# Web Components React Roadmap\n\n- [RFC: Plan for custom elements in React 17](https://github.com/facebook/react/issues/11347) opened on 24 Oct 2017. Not closed yet.\n\n## Resources\n\n- [Webcomponents.org](https://www.webcomponents.org)\n\n- [React / Web components](https://reactjs.org/docs/web-components.html)\n\n- [Can I use web components?](https://caniuse.com/#search=web%20components)\n\n- [Web components polyfills](https://github.com/webcomponents/webcomponentsjs)\n\n- [custom-elements-everywhere](https://custom-elements-everywhere.com/)\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Fwebcomponents-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemoncode%2Fwebcomponents-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Fwebcomponents-react/lists"}