https://github.com/wes-goulet/sample-react-consumes-web-component
A sample React app consuming a web component
https://github.com/wes-goulet/sample-react-consumes-web-component
Last synced: 2 months ago
JSON representation
A sample React app consuming a web component
- Host: GitHub
- URL: https://github.com/wes-goulet/sample-react-consumes-web-component
- Owner: wes-goulet
- Created: 2018-11-22T07:39:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-26T01:17:00.000Z (over 6 years ago)
- Last Synced: 2024-12-28T10:33:03.452Z (4 months ago)
- Language: JavaScript
- Homepage: https://react-web-component.netlify.com/
- Size: 215 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sample-react-consumes-web-component
A sample React app, started with [create-react-app](https://github.com/facebook/create-react-app), that consumes [a web component](https://github.com/wes566/wc-menu-button).
The [master](https://github.com/wes566/sample-react-consumes-web-component/tree/master) branch uses NPM and `defineCustomElements` to install the web component, and the [script-tag](https://github.com/wes566/sample-react-consumes-web-component/tree/script-tag) branch uses a `` tag to install the web component.
## [Demo](https://react-web-component.netlify.com)
## Steps to consume the web component in react app
1. NPM install the web component
```bash
npm install wc-menu-button --save
```
2. Add a call to `defineCustomElements` in the [index.js](src/index.js) file.
```js
import { defineCustomElements } from "test-components/dist/loader";
.
.
.
defineCustomElements(window);
```
3. Add the element to your TSX
```js
render() {
return (
<div>
<wc-menu-button></wc-menu-button>
</div>
);
}
```
This is simplified, to see how to get a ref to the web component (so you can listen to events or set properties) see [the source code](src/App.js).