Skip to content
A sample React app consuming a web component
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json
yarn.lock

README.md

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
  1. Add a call to defineCustomElements in the index.js file.
import { defineCustomElements } from "test-components/dist/loader";
.
.
.
defineCustomElements(window);
  1. 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.

You can’t perform that action at this time.