Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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.

About

A sample React app consuming a web component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published