# @wakamsha/use-listbox

> A simple React Hook that Provides the behavior and accessibility implementation for a ListBox component.

Latest version **1.1.0** (published 2022-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wakamsha/use-listbox
pnpm add @wakamsha/use-listbox
yarn add @wakamsha/use-listbox
bun add @wakamsha/use-listbox
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-12-31 |
| First published | 2021-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | 18.12.1 |
| Dependencies | 0 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | wakamsha |
| Maintainers | wakamsha |
| Keywords | react, react hooks, accessible, accessibility, a11y, wai-aria, dropdown, menu, contextmenu |

## Links

- npm: https://www.npmjs.com/package/@wakamsha/use-listbox
- Repository: https://github.com/wakamsha/use-listbox
- Homepage: https://github.com/wakamsha/use-listbox#readme
- Issues: https://github.com/wakamsha/use-listbox/issues
- npm.io page: https://npm.io/package/@wakamsha/use-listbox

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-12-31
- 1.0.1 — 2021-12-28
- 1.0.0 — 2021-12-27

## README

# use-listbox

> A simple React Hook that Provides the behavior and accessibility implementation for a listbox component.

**[Demo and Document](https://wakamsha.github.io/use-listbox/?path=/docs/uselistbox--basic)**

![mv](https://user-images.githubusercontent.com/2629981/147489862-a9f6d7c1-6ea6-41e8-8472-a50d768c0c7f.gif)

## FEATURES

- Exposed to assistive technology as a listbox using ARIA
- Zero dependencies
- Tiny size

## INSTALL

```bash
# with Yarn
yarn add @wakamsha/use-listbox

# with npm
npm install @wakamsha/use-listbox
```

### GETTING STARTED

```tsx
import { useListBox } from '@wakamsha/use-listbox';

export const App = () => {
  const menuItems = ['foo', 'bar', 'baz'];

  const { itemProps, active, triggerProps } = useListBox(menuItems.length);

  return (
    <section aria-expanded={active}>
      <button {...triggerProps}>Open</button>
      <ul role="menu" aria-hidden={!active}>
        {menuItems.map((item, index) => (
          <li key={item}>
            <button {...itemProps[index]} onClick={alert}>
              {item}
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
};
```

## LICENSE

[MIT license](https://en.wikipedia.org/wiki/MIT_License).

---
_Source: https://npm.io/package/@wakamsha/use-listbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._