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

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.

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.

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

or

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

Follow the Getting Started with HelixUI guide

<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>

 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

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

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

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

See Bugs

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

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

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

Thanks goes to these people:

James Thompson 💻

Nicko Winner-Arroyo 💻

Mike Mangialardi 💻