Skip to content

sparksuite/react-accessible-dropdown-menu-hook

Repository files navigation

React Accessible Dropdown Menu Hook

npm bundle size Codecov coverage npm downloads npm release tested with Rugged license

This 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

Quick start

Install with Yarn or npm:

yarn add react-accessible-dropdown-menu-hook
npm install react-accessible-dropdown-menu-hook

Import the Hook:

import useDropdownMenu from 'react-accessible-dropdown-menu-hook';

Call the Hook, telling it how many items your menu will have:

const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);

Spread the buttonProps onto a button:

<button {...buttonProps}>Example</button>

Create the menu with the role='menu' property and spread itemProps[x] onto each item:

<div className={isOpen ? 'visible' : ''} role='menu'>
    <a {...itemProps[0]} href='https://example.com'>Regular link</a>
    <a {...itemProps[1]} onClick={handleClick}>With click handler</a>
</div>

Done!

Documentation

Read the docs at: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/

Demo

See it in action: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/demo/

Accessibility notes

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.

Contributing

We love contributions! Contributing is easy; learn how.