JSPM – react-accessible-dropdown-menu-hook@2.2.1

Package Exports

react-accessible-dropdown-menu-hook

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-accessible-dropdown-menu-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, setIsOpen } = 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.

react-accessible-dropdown-menu-hook