https://github.com/wakamsha/use-listbox

A simple React Hook that Provides the behavior and accessibility implementation for a listbox component.
https://github.com/wakamsha/use-listbox

accessibility contextmenu custom-hooks hooks menu navigation react wai-aria

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wakamsha/use-listbox
• Owner: wakamsha
• License: mit
• Created: 2021-12-27T10:52:06.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-06T21:24:12.000Z (2 months ago)
• Last Synced: 2025-04-06T22:25:19.249Z (2 months ago)
• Topics: accessibility, contextmenu, custom-hooks, hooks, menu, navigation, react, wai-aria
• Language: TypeScript
• Homepage: https://wakamsha.github.io/use-listbox/?path=/docs/uselistbox--basic
• Size: 3.22 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

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 (

    

      Open

      


        {menuItems.map((item, index) => (

          


            

              {item}

            

          

        ))}

      

    

  );

};

```


## LICENSE

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