sample-react-ts-consumes-web-component

A sample React app, written in Typescript (using create-react-app-typescript), that consumes a web component.

The master branch uses NPM and defineCustomElements to install the web component, and the script-tag branch uses a <script> tag to install the web component.

Demo

Steps to consume the web component in react typescript app

1. NPM install the web component

npm install wc-menu-button --save

2. Add a call to defineCustomElements in the index.tsx file.

import { defineCustomElements } from "test-components/dist/loader";
.
.
.
defineCustomElements(window);

3. Declare your web component typings (you can use a declarations file) so TS doesn't complain when you use it in your TSX code.

declare namespace JSX {
  interface IntrinsicElements {
    "wc-menu-button": any;
  }
}

4. Add the element to your 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.