https://github.com/wes-goulet/sample-react-ts-consumes-web-component
A sample React (Typescript) app consuming a web component
https://github.com/wes-goulet/sample-react-ts-consumes-web-component
Last synced: 12 days ago
JSON representation
A sample React (Typescript) app consuming a web component
- Host: GitHub
- URL: https://github.com/wes-goulet/sample-react-ts-consumes-web-component
- Owner: wes-goulet
- Created: 2018-11-25T07:00:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T07:38:15.000Z (over 2 years ago)
- Last Synced: 2023-08-02T09:11:17.877Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://react-ts-web-component.netlify.com/
- Size: 3.07 MB
- Stars: 10
- Watchers: 2
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sample-react-ts-consumes-web-component
A sample React app, written in Typescript (using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript)), that consumes [a web component](https://github.com/wes566/wc-menu-button).
The [master](https://github.com/wes566/sample-react-ts-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-ts-consumes-web-component/tree/script-tag) branch uses a `` tag to install the web component.
## [Demo](https://react-ts-web-component.netlify.com)
## Steps to consume the web component in react typescript app
1. NPM install the web component
```bash
npm install wc-menu-button --save
```
2. Add a call to `defineCustomElements` in the [index.tsx](src/index.tsx) file.
```tsx
import { defineCustomElements } from "test-components/dist/loader";
.
.
.
defineCustomElements(window);
```
3. Declare your web component typings (you can use [a declarations file](src/declarations.d.ts)) so TS doesn't complain when you use it in your TSX code.
```ts
declare namespace JSX {
interface IntrinsicElements {
"wc-menu-button": any;
}
}
```
4. Add the element to your TSX
```tsx
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.tsx).