Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

This repository shows how a React project can consume any web component, including any web component from the Elix library.

Quick start

Enter the following in a terminal window:

git clone
cd react-example
npm install
npm run build
npx http-server

Then open http://localhost:8080 to view the sample page.

Using web components in React

Web components like the ones in the Elix library are defined as JavaScript classes that you can manipulate as markup in HTML or directly in your JavaScript/TypeScript code.

Instantiating web components in markup

Load the source file for the desired Elix component as a module. You can bundle it into your application using a bundler like webpack, or load it directly as shown here:

    <script type="module" src="node_modules/elix/src/ListBox.js"></script>
    <elix-list-box aria-label="Fruits" style="height: 250px; max-width: 300px">
      <!-- etc. -->

Once the component module is loaded, you can then instantiate the component with its tag name. The tag name for the ListBox component is elix-list-box. If desired, you can then set properties on the component as attributes.

Instantiating web components in JSX

Each Elix component module exposes a default export that you can import into your JavaScript/TypeScript application.

// Import the Elix components we want to use.
import 'elix/src/ListBox.js';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

  render() {
    return (
      <elix-list-box aria-label="Fruits" selected-index="0">
        <!-- etc. -->


In JSX, you can reference the component by its tag name. You can then pass data to it as attributes. The sample above sets both the standard aria-label attribute and the custom selected-index attribute, which sets the ListBox's selectedIndex property to the desired index. Normally your React application would track the selectedIndex as state and update that state by listening to an event on the ListBox; see src/app.jsx for more complete sample source code.


Demonstrates use of an Elix web component in a React application







No releases published


No packages published