so99ynoodles/headless-react

Headless UI using React Aria and React Stately

headless-react

Headless React components with @react-aria and @react-stately.

Motivation

react-aria and react-stately provide great APIs but they are hard to use between projects to projects and difficult to learn / implement complex components with them. Providing headless-ui like APIs would be helpful.

CAUTION: THIS IS AN UNSTABLE PROJECT FOR THE PERSONAL USE. USE IT AT YOUR OWN RISK.

Getting Started

$ npm install @headless-react/combobox

import { ComboBox } from '@headless-react/combobox'

const AutoComplete = ({
  label,
  items
}) => {

  return (
    <ComboBox defaultItems={items}>
      <ComboBox.Label>{label}</ComboBox.Label>
      <ComboBox.InputGroup>
        {({ selectedItem }) => (
          <>
            <ComboBox.Input />
            <ComboBox.PopoverTrigger>
          </>
        )}
      </ComboBox.InputGroup>
      <ComboBox.Popover>
        <ComboBox.Options>
          {({ options }) => options.map(option => (
            <ComboBox.Option key={option.key} option={option}>
              {option.name}
            </ComboBox.Option>
          ))}
        </ComboBox.Options>
      </ComboBox.Popover>
    </ComboBox>
  )
}

Components

• Button
• ComboBox
  • Single
  • Multi
• Select
  • Single
  • Multi
• Menu
• RadioGroup

...something I need

Examples on CodeSandBox

• Select Example
• ComboBox Example
• Menu Example