Wrapping React Components Inside Custom Elements

Web Components

React and Web Components

  • Developers are still suspicious about the Web Components API and prefer to use a proven framework/library instead.
  • Web Components API is still not implemented in some of the browsers, which means that in order to use them we need to load a polyfill code.
  • As developers, we are used to frameworks/libraries goodies such as data binding, reactivity, lazy loading and more. In Web Components we need to craft everything and the boilerplate is sometimes cumbersome.

Wrapping React Component inside a Custom Element

  • Pass the title and children props
  • Re-render when the title prop is changing
export default class CollapsiblePanel extends HTMLElement {}window.customElements.define('collapsible-panel', CollapsiblePanel);
mountPoint: HTMLSpanElement;
title: string;
connectedCallback() {
this.mountPoint = document.createElement('span');
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(this.mountPoint);

const title = this.getAttribute('title');
ReactDOM.render(this.createCollapsed(title), this.mountPoint);
retargetEvents(shadowRoot);
}
createCollapsed(title) {
return React.createElement(CollapsibleReact, { title }, React.createElement('slot'));
}
static get observedAttributes() {
return ['title'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'title') {
ReactDOM.render(this.createCollapsed(newValue), this.mountPoint);
}
}

Re-targeting React Events

Testing The Wrapper

Angular app hosting a React wrapped component

Summary

--

--

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