Cory Rylan

My name is . Google Developer Expert, speaker, Software Developer and Web Components enthusiast.

Follow @coryrylan
React JS

How to use Web Components in React

Cory Rylan

- 2 minutes

This post covers how to use Web Components in the latest experimental branch of React. To use Web Components in older versions read more here.

React did not fully support Web Components or specifically Custom Elements until very recently. However, React recently added experimental support for Web Components enabling React apps to use them without requiring special shims for compatibility. This is fantastic for component libraries, Design Systems, and micro-frontend use cases.

Web Components provide a generic and reusable UI component model for the Web. Web Components consist of a few stand-alone technologies such as Custom Elements, Shadow DOM, and HTML templates. Combined, we can create and deploy components that work in any JavaScript framework.

Web Components primarily communicate with properties and custom events. Properties can be set to pass data into a component, and custom events can allow the component to pass data back to the host application.

Using the latest experimental branch of React, let's look at a simple alert Web Component in a React application.

In our example, we have a simple alert Web Component. This component has a status property for different statuses and a closable property to set if the alert should show a close button.

A Web Component working in React

To use our alert Web Component, we import the component file and add the tag to our React component.

import React, { useState }  from 'react';
import './alert.js';

export default function App() {
return (
<div>
<x-alert>
This is a Web Component in React
</x-alert>
</div>
);
}

Now we can start to set properties and configure our alert.

import React, { useState }  from 'react';
import './alert.js';

export default function App() {
return (
<div>
<x-alert status={'success'} closable>
This is a Web Component in React
</x-alert>
</div>
);
}

Most Web Components allow JavaScript properties and HTML Attributes to pass data. HTML Attributes are limited to string types but can be converted. For consistency, I typically prefer to setting properties over attributes when possible.

Web Components can also emit CustomEvent event types to notify our app of changes. For example, the alert will provide a closeChange event when the user clicks the close button. To listen to events, prefix the event name with on. Note the event capitalization remains the same. For example, the custom event closeChange becomes oncloseChange in your JSX.

import React, { useState }  from 'react';
import './alert.js';

export default function App() {
const [show, setShow] = useState(true);

return (
<div>
<button onClick={() => setShow(!show)}>toggle alert</button>

<x-alert hidden={show} status="success" closable oncloseChange={() => setShow(!show)}>
This is a Web Component in React
</x-alert>
</div>
);
}

Now we can listen to events from our Web Components and set state just like any other component in our application. Check out the full working demo below to see details on the alert component!

View Demo Code   
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

React JS

How to use Web Components with TypeScript and React

Learn how to use Web Components with TSX TypeScript and React components.

Read Article
React JS

Trigger Input Updates with React Controlled Inputs

Learn how to update inputs via the native DOM APIs while using React Controlled Component APIs.

Read Article
React JS

Using Web Components in React - Video Tutorial

Learn how to integrate and use Web Components in React by using props and events.

Read Article