Exploring React's new web component support

Last week, React landed a long-awaited feature in the @experimental branch: support for custom element attributes and properties. Let's take a look at what that means and why I'm excited about it.

Why web components?

If you only use React, this means you get access to new quality components, like Vaadin components, without having to use any workarounds.

If you're in an organization that uses different frameworks across projects, the support for web components means you can more easily use the same set of components in all projects instead of having to reinvent the wheel (or date picker) in each project. They're a great foundation for design systems.

How does it work?

Start by installing the @experimental version of react and react-dom

npm i react@experimental react-dom@experimental

Then, install a web component that you want to use:

npm i @vaadin/vaadin-date-picker

Import the web component using a normal import statement:

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

You can then use it in your JSX, binding events and properties like with any other component. Note how the component name uses dashes instead of camel case.

return (
  <vaadin-date-picker
    label="When were you born?"
    i18n={localizedStrings}
    onChange={handleChange}
  />
);

Here's a running example you can try out:

What doesn't work (yet)?

There are still some outstanding issues with custom HTML element support. For instance, onChange event handlers do not work properly (issue).

Using web components with TypeScript is also still challenging as the type definitions haven't been updated yet.

When is it getting released?

Official web component support in React may be released as soon as React 18 if the team gets enough feedback to be confident in releasing it. Otherwise, the release may be pushed back to 19.

If you're interested in seeing web component support in React 18, please try it out and report any issues to the React team on GitHub https://github.com/facebook/react/issues.