Nothing Precedes Matter

    react-accessible-dropdown-menu-hook
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.0 • Public • Published

    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.

    Install

    npm i react-accessible-dropdown-menu-hook

    DownloadsWeekly Downloads

    6,843

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • sparksuite-bot
    • wescossick