How To Use Web Components in React
Web Components enable us to develop entirely independently of frontend frameworks. Here is how to use them in React.
Many developers feel threatened by the thought of Web Components wiping out frontend frameworks and libraries. That won't happen because both technologies solve different problems. But combining them is the real secret to success.
“Most people who use React don’t use Web Components, but you may want to […].” — https://reactjs.org
Before we dive into our example, let's look at the purpose of Web Components and React.
Purpose of Web Components
Web Components are reusable client-side components based on official web standards and supported by all major browsers. They are an excellent way of encapsulating functionality from the rest of our code. Not only that, but you can reuse them in every web application and web page.
Their purpose is to write strongly encapsulated custom elements to use everywhere. Web Components enable us to develop entirely independently of frontend frameworks.
The primary benefit of Web Components is that we can use them everywhere. With any framework, or even without a framework. — vuejs.org
Purpose of React
While Web Components provide strong encapsulation for reusable components, React provides a declarative library that keeps the DOM in sync with your data.
As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. — https://reactjs.org
The main difference to Web Components is that we can only use React components inside a React application. A Web Component, on the other hand, can be used anywhere. We can use it in React, Vue, Angular, or any other web application.
React is the way to go when your components need to handle a lot of data that needs to be passed down to child components.
Building a Web Component
Let's go ahead and build our first Web Component, which we will integrate into a React application.
We will keep things simple and create an effortless custom element. If you are interested in building more complex Web Components, go through my series of articles: The Complete Web Component Guide.
Here is the JavaScript code for our hello-world custom element:
Having this JavaScript code loaded in our HTML, we can easily include our component like this:
<hello-world></hello-world>
That will show our "Hello World!" headline. Try it yourself. Here is the CodePen.
Integrate a Web Component in React
Let's take our Web Component and include it in a running React application. To make it easy, we will go to a React starter project on Stackblitz. After that, we create the file hello-world.js and put the code of our Web Component from above in it.
Next, we go into our React component and import our Javascript file, including the code of our Web Component:
import ./hello-world
And voila! The preview displays our Web Component. We successfully integrated a custom element into React.
Still, there is an error in the editor:
It says, "Property 'hello-world' does not exist on type 'JSX.IntrinsicElements'". The error occurs because React components should always start with an uppercase letter. Our component's name begins with a lowercase letter. So, should we change our custom tag to begin with an uppercase letter?
Let's try that:
As you can see, I changed our custom tag to Hello-world. But, when calling customElements.define("Hello-world") the browser throws an exception because we are violating one of two rules to be followed for the element's tag name:
- Name has to start with a lowercase ASCII character. It cannot have an uppercase ASCII character anywhere.
- Name must contain a dash — character. This dash character helps the browser to distinguish custom elements from regular elements.
We are only allowed to use lowercase characters, and the component needs to contain at least one dash. So, how to fix the error? Typescript gives us the possibility to declare our own types. To fix the error, we can define our custom element type by extending React's IntrinsicElements interface like this:
Finally, we have successfully integrated our custom element to React without any errors. Here is the final Stackblitz of the example:
Final Thoughts
Using Web Components in React is easy. Building reusable components that are usable throughout frontend frameworks brings many benefits. We have learned that we should use Web Components when creating reusable components to use everywhere. When it comes to handling a lot of data, React is the way to go.
I hope you enjoyed reading this article. I am always happy to answer questions, and I am open to criticism. Feel free to contact me at any time 😊