sample-react-consumes-web-component

A sample React app, started with create-react-app, 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 app

1. NPM install the web component

npm install wc-menu-button --save

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

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

3. 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.