Headless React components with @react-aria
and @react-stately
.
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.
$ 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>
)
}
- Button
- ComboBox
- Single
- Multi
- Select
- Single
- Multi
- Menu
- RadioGroup
...something I need