DEV Community 👩‍💻👨‍💻

Marcus Hellberg
Marcus Hellberg

Posted on

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?

Web components are a collection of web standards that let developers build UI components that work in any framework by defining their own custom HTML elements.

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
Enter fullscreen mode Exit fullscreen mode

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

npm i @vaadin/vaadin-date-picker
Enter fullscreen mode Exit fullscreen mode

Import the web component using a normal import statement:

import "@vaadin/vaadin-date-picker";
Enter fullscreen mode Exit fullscreen mode

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}
  />
);
Enter fullscreen mode Exit fullscreen mode

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.

Full-stack demo app

Here's a full-stack Spring Boot + React app here if you want to give it a try: https://github.com/marcushellberg/fusion-reactor

React and web components app with data grid

Top comments (1)

Collapse
 
brownieboy profile image
Michael Brown

For instance, onChange event handlers do not work properly (issue).

No longer true. This works in React 18.2.0.

Top 7 Badge

Earn our Top 7 Badge!

Write a post that gets featured in our weekly "must-reads" and you can earn this badge for your profile. 😎