On the blog: Build your next Design System with Web Components


With an application built using the create-react-app script the easiest way to include the component library is to call defineCustomElements(window) from the index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// test-component is the name of our made up Web Component that we have
// published to npm:
import { defineCustomElements } from 'test-components/dist/loader';

ReactDOM.render(<App />, document.getElementById('root'));

Following the steps above will enable your web components to be used in React, however there are some additional complexities that must also be considered. https://custom-elements-everywhere.com/ describes them well.


Back Next