Start using web components in React

Jens Jansson
Oct 22, 2018 · 4 min read

Web components are moving forward at a fast pace. Browsers support is arriving as well with Chrome 67+, Firefox 63+ and Safari 11+ supporting them. Edge also started recently working on the support. Support in various web libraries is progressing well. With react-scripts 2.0, using web components in React has become feasible.

This post will show you how to add web components to a React project. I will start with a fresh React project and show how to add your first web component. You can adapt these steps to take web components in use in your own customized React project.

Create a React app

Let’s follow the React tutorial and use npx to create a new project.

npx create-react-app react-web-components
cd react-web-components
npm start

Add web components polyfills

Even if all browsers are working on adding web components support, they aren’t all there yet, and users will use old browsers that do not support web components for a long time still. For those we have to include polyfills that bring the new functionality to browsers that don’t support it natively. Let’s install webcomponentsjs and copy the relevant files to the public folder.

Install webcomponents.js

npm install --save @webcomponents/webcomponentsjs

Copy polyfills to runtime

We are going to use the vendor copy package to copy the polyfills to /public/vendor/ after install.

npm install --save vendor-copy

Then open up package.json and add a postinstall step to scripts.

"scripts": {
"postinstall": "vendor-copy",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

In the same file, you have to also define what should be copied. We need:
1) webcomponents-bundle.js for supporting web components specs
2) custom-elements-es5-adapter for when you build and ES5 version for prodction.

"vendorCopy": [
{
"from": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
"to": "public/vendor/custom-elements-es5-adapter.js"
},
{
"from": "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
"to": "public/vendor/webcomponents-bundle.js"
}
]

These files will now be copied every time to /public/ when you run npm install .

Put the polyfills into use

public/index.html needs to load the polyfills. Add the following lines to the end of <body>.

<script src="%PUBLIC_URL%/vendor/webcomponents-bundle.js"></script>
<script>if (!window.customElements) { document.write("<!--"); }</script>
<script src="%PUBLIC_URL%/vendor/custom-elements-es5-adapter.js"></script>
<!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

The web components polyfill can always be loaded and it doesn’t do much in browsers that already support the spec, like Chrome, Safari and Firefox. However, transpiling ES6 classes to ES5 through Babel messes up browsers that support it natively. Therefore we have to decide if the polyfill should be loaded here or not. If we do not want it, it is commented away on runtime. Therefore we need the comment at the end as well.

Web components support in place

You can test your project to see that the polyfills are loaded correctly. Run npm install to get the postinstall to run, and start up your project again with npm start. You should see the webcomponents-bundle.js loaded with 200 status code in the inspector.

The package.json looks like this after all the steps, and you can see the polyfill files in /public/vendor/.

Add a web component

Your project is ready for the addition of the first web component. Let’s install it and add it to the view

Install Vaadin Date Picker

Here I’m using Vaadin’s Date Picker as the web component that I’m going to add to the app. Use npm to install the web components that you want to use.

npm install @vaadin/vaadin-date-picker

Add it to your view

Let’s open up the main view of your app, src/App.js. Start by adding the import to Vaadin date-picker.

import '@vaadin/vaadin-date-picker';

Next, we’ll edit the template in render(). You can remove the <header> and replace it with your content.

import React, { Component } from 'react';
import './App.css';
import '@vaadin/vaadin-date-picker';
class App extends Component {
render() {
return (
<div className="App">
<vaadin-date-picker label="When were you born?"></vaadin-date-picker>
</div>
);
}
}
export default App;

And that’s it.

Now you have your first web component in your app and you can start adding others as well. Vaadin has a great set of other web components with great UX and visuals that are ready to be used.

Jens Jansson

Jens Jansson

Written by

Jens Jansson

A Product Managers reflections

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade