How to use Web Components in React

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.

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!