https://github.com/a7ul/webcomponents-with-react-webcomponentify
Web components based components library using react-webcomponentify + (P) React. This repo showcases how you can build web components using react without much bundlesize overhead.
https://github.com/a7ul/webcomponents-with-react-webcomponentify
components experiment javascript preact react reactjs web web-components
Last synced: 25 days ago
JSON representation
Web components based components library using react-webcomponentify + (P) React. This repo showcases how you can build web components using react without much bundlesize overhead.
- Host: GitHub
- URL: https://github.com/a7ul/webcomponents-with-react-webcomponentify
- Owner: a7ul
- License: mit
- Created: 2019-01-27T19:27:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-20T13:12:12.000Z (over 1 year ago)
- Last Synced: 2025-04-05T02:22:12.649Z (about 2 months ago)
- Topics: components, experiment, javascript, preact, react, reactjs, web, web-components
- Language: HTML
- Homepage: https://www.atulr.com/webcomponents-with-react-webcomponentify/
- Size: 397 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Web components based components library using react-webcomponentify + React
This repo showcases how you can build web components using react without much bundlesize overhead. It uses
react-webcomponentify.
Go ahead and test it out here: Link to components libarary
**Pro Tip: Do try inspecting the elements using chrome dev tools**
You can also check the underlying source code in the inspector since I have enabled source maps.
---
# Why ?
I suggest you read here:
Link to **react-webcomponentify**: https://github.com/a7ul/react-webcomponentify
---
## How much overhead does react-webcomponentify add?
**TLDR: 2.1kb**
- With react-webcomponentify and components : 9.1kb after gzip
- Without react-webcomponentify and only components: 7kb after gzip
- Overhead caused by react-webcomponentify: 2.1kb after gzip for entire component library
**Hence with react-webcomponentify + preact you can build a web component libarary with bundle size as small as 9kb**
---
## Wish to build your own web-component library with React like this one ?
**Installation**
- Clone this repo: https://github.com/a7ul/webcomponents-with-react-webcomponentify
- `npm install`
- `npm run start`
- Add your components.
- If you want to build: `npm run build`
- The code is pretty self explanatory.
---
### This Component Library contains:
- Button component : ``
- Input Component : ``
### Why I am using Preact in the examples ?
Well If you look closely at package.json and webpack config, you will realize I am using preact here. You can go ahead and use React aswell. Everything will work as expected. Only downside is that React is a bit heavy as compared to Preact. Hence it will add to your bundle size. The example here will work 100% with React as Preact has extremely good compatibility with react.