Skip to content
A sample React (Typescript) app consuming a web component
TypeScript 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
images.d.ts
package-lock.json
package.json
tsconfig.json
tsconfig.prod.json
tsconfig.test.json
tslint.json
yarn.lock

README.md

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