Helix React

A React wrapper of the Helix UI Webcomponents Library

🚀 Alpha release is here! Check out how to get started below! 🌻

---

Table of Contents

• The problem
• This solution
• Installation
• Examples
  • Helix UI Webcomponent Snippet From Documentation
  • Our Implementation
• Guiding Principles
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
  • ❓ Questions
• Contributors

The problem

You ❤️Helix UI webcomponents library and want to use it in your React application. You then realized React support for webcomponents is underwelming and requires you to write React compatibility wrappers for each web component that uses events.

This solution

Helix React exposes React wrappers of the Helix UI webcomponents for you. No need to write and maintain this yourself, this has you covered. As a bonus, you can also see the components in Storybook in order to play around yourself.

Installation

npm -i @helix-design-system/helix-react helix-ui prop-types

or

yarn add @helix-design-system/helix-react helix-ui prop-types

Prerequisites

Helix UI

Follow the Getting Started with HelixUI guide

Examples

Helix UI Webcomponent Snippet From Documentation

<hx-disclosure
  aria-controls="demo-modal"
  class="hxBtn"
>
  Open Modal
</hx-disclosure>
<hx-modal
  id="demo-modal"
>
  <header>
    ...
  </header>

  <hx-div>
    ...
  </hx-div>

  <footer>
    <button class="hxBtn hxPrimary">Confirm</button>
    <button class="hxBtn">Cancel</button>
  </footer>
</hx-modal>

Our Implementation

 import { Disclosure, Div, Modal } from '@helix-design-system/helix-react';

<Disclosure
  ariaControls="demo-modal"
  className="hxBtn"
>
  Open Modal
</Disclosure>

<Modal id="demo-modal">
  <header>
    ...
  </header>
  <Div>
    ...
  </Div>
  <footer>
    <Button variant="primary">Confirm</Button>
    <Button>Cancel</Button>
  </footer>
</Modal>

See Helix-React Storybook docs for more examples

Guiding Principles

We try to only expose basic wrappers of Helix UI webcomponents. Each wrapper corresponds with a component listed on the Helix UI documentation:

Issues

Looking to contribute? Look for the [Good First Issue][good-first-issue] label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

❓ Questions

For questions related to using the library, please file an issue on GitHub.

📚 Setting up a Local Dev Environment

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. You can use this as a playground for all our components.

1. Install Dependencies

yarn install	

2. Run Storybook

npm start	

The script should automatically open Storybook in your browser, but you can always navigate to http://localhost:6006/?path=/story

3. Play Around

Contributors

Thanks goes to these people:

James Thompson 💻

Nicko Winner-Arroyo 💻

Mike Mangialardi 💻