useMenu
The problem
You need an menu experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.
This solution
useMenu is a React hook that provides all the logic to create a WAI-ARIA menu component.
Installation
npm install use-menu-hook --save
// or
yarn add use-menu-hook
This packages depends on react, Please make sure you installed react as well.
Usage
import useMenu from "use-menu-hook";
function MenuButton() {
const { getMenuButtonProps, getMenuItemProps, getMenuProps } = useMenu();
return (
<div className="App">
<button {...getMenuButtonProps({ id: "colors" })}>Colors</button>
<ul {...getMenuProps({ labelledBy: "colors" })}>
<li {...getMenuItemProps({ id: "red" })}>Red</li>
<li {...getMenuItemProps({ id: "green" })}>Green</li>
<li {...getMenuItemProps({ id: "blue" })}>Blue</li>
</ul>
</div>
);
}