Web Components with React Hooks

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
2. Install Wired Elements
3. Import Wired Input Element
4. Create a component wrapper
5. Test input “onChange” event

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
• Imported ‘wired-elements’
• Added <wired-input> to the template
• Created a handle input function to print the value being typed when “onChange” is triggered

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”
• In line 6, added a “useEffect” function to be triggered when the DOM is ready (this way we ensure “inputRef” is not empty)
• Line 7, subscribe to the input event
• Line 8, checking if “onChange” is not undefined then call the function and pass it the event
• Line 13, added the wired input element with “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.