A simple Hook for creating fully accessible dropdown menus in React
npm install react-accessible-dropdown-menu-hookThis Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.
- ♿️ Fully accessible
- 📦 Written entirely in TypeScript
- 🔬 Thoroughly tested
- ⚡️ Zero dependencies
- ✨ Tiny size
Install with Yarn or npm:
```
yarn add react-accessible-dropdown-menu-hook
``
npm install react-accessible-dropdown-menu-hook
Import the Hook:
`tsx`
import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
Call the Hook, telling it how many items your menu will have:
`tsx`
const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);
Spread the buttonProps onto a button:
`tsx`
Create the menu with the role='menu' property and spread itemProps[x] onto each item:
`tsx``
Done!
Read the docs at: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/
See it in action: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/demo/
Our team carefully studied and adhered to strict accessibility guidelines when designing this Hook. To learn more, see: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/design/accessibility.
We love contributions! Contributing is easy; learn how.