Skip to content
/ react-example Public template

Demonstrates use of an Elix web component in a React application

License

Notifications You must be signed in to change notification settings

elix/react-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 git@github.com:elix/react-example.git
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:

<html>
  <head>
    <script type="module" src="node_modules/elix/src/ListBox.js"></script>
  </head>
  <body>
    <elix-list-box aria-label="Fruits" style="height: 250px; max-width: 300px">
      <div>Acai</div>
      <div>Akee</div>
      <div>Apple</div>
      <div>Apricot</div>
      <div>Avocado</div>
      <div>Banana</div>
      <!-- etc. -->
    </elix-list-box>
  </body>
</html>

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">
        <div>Acai</div>
        <div>Akee</div>
        <div>Apple</div>
        <div>Apricot</div>
        <div>Avocado</div>
        <div>Banana</div>
        <!-- etc. -->
      </elix-list-box>
    );
  }

}

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.

About

Demonstrates use of an Elix web component in a React application

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published