Web Components with React Hooks

Muhi Masri
Apr 4 · 3 min read

Introduction:

Web Components are of great use when it comes to creating a future proof component-based design system that can be interoperable and shared across multiple products.

Unfortunately, React is one of the few modern libraries that does not have full support to Web Components, especially when it comes to handling events. The reason is that React implements its own synthetic event system, it cannot listen for DOM events coming from Web Components.

The great news is that you don’t need to rewrite all your design system from scratch using React. There is a simple workaround that requires creating thin wrappers and subscribing to DOM events.

In this example, I’m using Wired Elements to make an input Web Component work with React. Wired Elements are a set of common UI elements with a hand-drawn, sketchy look. The library uses LitElement for creating Web Components.

Also, in this article, I’m solving specifically the problem with capturing DOM events through a React component wrapper. Please refer to custom-elements-everywhere.com if you want to look at all open issues regarding React and Web Components support.

Overview:

  1. Create React App

1. Create React App:

Create a new React App.

npx create-react-app react-webcomponent

2. Install Wired Elements:

Full documentation on Wired Elements is available on their main repository

npm i wired-elements

3. Import Wired Input Element:

In this section, we will add a Wired Input Element without a wrapper and show how the “onChange” event will not be triggered as React does not detect DOM events.

Quick summary of the code above:

  • Reused App.js file and cleaned up unused code

Now as expected, when typing, the console doesn’t print anything:

4. Create a component wrapper:

Let’s add a new react component and call it “WiredInput.js”. It will subscribe to the input event and call “onChange” function from the component props

Here are some details of what we did in the code above:

  • In line 5, created a reference to the <wired-input> element using “createRef” and named it “inputRef”

5. Test input “onChange” event

Now that we have the wrapper component ready, let’s put it into action!

First, let’s update app.js to use the new component:

Here is a demonstration of our final working code:

You can access the full repository here. I hope you enjoyed learning from this article and if you have any questions, please leave a comment below.

For more related articles, you can visit my site or signup for the latest articles and updates. Bye for now 😊

Originally published at https://muhimasri.com on April 4, 2021.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Muhi Masri

Written by

UI architect and JavaScript specialist with emphasis on efficiency and great user experience. https://muhimasri.com

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Muhi Masri

Written by

UI architect and JavaScript specialist with emphasis on efficiency and great user experience. https://muhimasri.com

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store