@wakamsha/use-listbox v1.1.0

use-listbox

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

Demo and Document

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

LICENSE

MIT license.