Guide How To Implement React Native Web Components

In this guide, we will be going to use the React Native Web Components, (Custom Elements). We will be going to pass props as attributes/properties to our Custom Element and how to add event listeners for our Custom Element’s events in a component. we will pass props manually, however, afterward, we will use a custom React Hook to automate this process. However, a custom React Hook is a library to bridge the Web Components. Ok! now suppose we wanted to use a Web Component which represents a Dropdown Component in a component. We can import this Web Component then render it within our React component.

1. Installing the web component

You can install the Web Component via npm install road-dropdown. So far, the React Component is only rendering the Custom Element, but no props are given to it. It isn’t as simple as passing the props as properties the following way, because you need to pass objects, arrays, and functions in a various way to Custom Elements.

React component would be applied in our React application to get to understand the props that we need to pass to our Web Component

Passing the label and option property unchanged as attributes to our Web Components is fine

However, we need to do something about the options object and the onChnage function, because they need to be adjusted and cannot be passed simply as attributes. will begin with the object: Similar to arrays, the object needs to be passed as JSON formatted string to the Web Component instead of a JavaScript object.

That’s it for the object. Next, we need to take care about the function. Rather than passing it as attribute, we need to register an event listener for it. That’s where we can use React’s useLayoutEffect when the component is rendered for the first time.

We are creating a reference for our Custom Element which is passed as ref attribute to the Custom Element to add an event listener in our React hook. Since we are sending a custom event from the custom drop-down element, we can register on this onChange event and propagate the information up with our onChange handler from the props. A custom event occurs with a detailed property to send an optional payload with it.

If you would have a built-in DOM event (click or change event) in our Web Component, you could also register for this event. However, this Web Component previously dispatches a custom event that matches the naming convention of React components.

An amendment would be to extract the event listener callback function to remove the listener when the component unmounts.

Now we add an event listener for our callback function and that is passed as a prop to our Dropdown Component. Therefore, we used a reference attached to the Custom Element to register this event listener. All other properties are passed as attributes to the Custom Element. The option and label properties are passed without modification. Besides, we passed the selected object as a stringified JSON format. In the end, you should be able to use this Web Component to React now.

The earlier section has shown you how to wire Web Components into React Components yourself. However, this method could be automated with a wrapper that takes care of formatting objects and arrays to JSON and registering functions as event listeners. Next, we will do this works with the useCustomElement React Hook which can be installed via npm install use-custom-element

In the custom hook giving us all the properties in a customized format by formatting all arrays and objects to the JSON, keeping the strings, integers, and Boolean intact, and removing the functions from the custom props. Instead, the functions will be registered as event listeners within the hook. Don’t ignore to pass the reference attribute to your Web Component as well, because as you have seen before, it is required to register all callback functions to the Web Component.

Leave a Reply

Your email address will not be published. Required fields are marked *