open-index/open-npm huggingface dataset:
npm package: @headless-react/button
Description: Headless React components using react-stately and react-aria
Latest version: 0.0.16

# @headless-react/button

Headless React Button component with [`@react-aria`](https://react-spectrum.adobe.com/react-aria/index.html) and [`@react-stately`](https://react-spectrum.adobe.com/react-stately/index.html).

## Getting Started

```
$ npm install @headless-react/button
```
npm package: @headless-react/combobox
Description: Headless React components using react-stately and react-aria
Latest version: 0.0.16

# @headless-react/combobox

Headless React ComboBox component with [`@react-aria`](https://react-spectrum.adobe.com/react-aria/index.html) and [`@react-stately`](https://react-spectrum.adobe.com/react-stately/index.html).

## Getting Started

```
$ npm install @headless-react/combobox
```

```jsx
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>
  )
}
```

## Example

[CodeSandBox Example](https://codesandbox.io/s/headless-react-combobox-yseg1j?file=/src/App.tsx)
npm package: @headless-react/menu
Description: Headless React components using react-stately and react-aria
Latest version: 0.0.16

# @headless-react/menu

Headless React Menu component with [`@react-aria`](https://react-spectrum.adobe.com/react-aria/index.html) and [`@react-stately`](https://react-spectrum.adobe.com/react-stately/index.html).

## Getting Started

```
$ npm install @headless-react/menu
```

```jsx
import { Menu } from '@headless-react/menu'

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>
  )
}
```

## Example

[CodeSandBox Example](https://codesandbox.io/s/headless-react-combobox-yseg1j?file=/src/App.tsx)
npm package: @headless-react/select
Description: Headless React components using react-stately and react-aria
Latest version: 0.0.16

# @headless-react/select

Headless React Select component with [`@react-aria`](https://react-spectrum.adobe.com/react-aria/index.html) and [`@react-stately`](https://react-spectrum.adobe.com/react-stately/index.html).

## Getting Started

```
$ npm install @headless-react/select
```

```jsx
import { Select } from '@headless-react/select'

const SelectExample = ({
  label,
  items
}) => {
  return (
    <Select items={items}>
      <Select.Label>{label}</Select.Label>
      <Select.PopoverTrigger>
        {({ selectedItem }) => selectedItem.value.name}
      </Select.PopoverTrigger>
      <Select.Popover>
        <Select.Options>
          {({ options }) => options.map(option => (
            <Select.Option key={option.key} option={option}>
              {option.name}
            </Select.Option>
          ))}
        </Select.Options>
      </Select.Popover>
    </Select>
  )
}

const MultiSelectExample = () => {
  return (
    <MultiSelect items={items}>
      <MultiSelect.Label>{label}</Select.Label>
      <MultiSelect.PopoverTrigger>
        {({ selectedItems }) => selectedItems.map(item => <span>{item.value.name}</span>)}
      </MultiSelect.PopoverTrigger>
      <MultiSelect.Popover>
        <MultiSelect.Options>
          {({ options }) => options.map(option => (
            <MultiSelect.Option key={option.key} option={option}>
              {option.name}
            </MultiSelect.Option>
          ))}
        </MultiSelect.Options>
      </MultiSelect.Popover>
    </MultiSelect>
  )
}
```

## Example

[CodeSandBox Example](https://codesandbox.io/s/headless-react-select-rte4ze?file=/src/App.tsx)
npm package: @headless-react/shared
Description: Headless React components using react-stately and react-aria
Latest version: 0.0.16

# @headless-react/shared

Headless React shared logic with [`@react-aria`](https://react-spectrum.adobe.com/react-aria/index.html) and [`@react-stately`](https://react-spectrum.adobe.com/react-stately/index.html).

## Getting Started

```
$ npm install @headless-react/shared
```