@wakamsha/use-listbox
v1.1.0
Published
A simple React Hook that Provides the behavior and accessibility implementation for a ListBox component.
Downloads
8
Maintainers
Readme
use-listbox
A simple React Hook that Provides the behavior and accessibility implementation for a listbox component.
FEATURES
- Exposed to assistive technology as a listbox using ARIA
- Zero dependencies
- Tiny size
INSTALL
# with Yarn
yarn add @wakamsha/use-listbox
# with npm
npm install @wakamsha/use-listbox
GETTING STARTED
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>
);
};