@helix-design-system/helix-react NPM

A React wrapper of the Helix UI Webcomponents Library

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

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

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:

helix-ui-documentation

Issues

Looking to contribute? Look for the 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.