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

1.0.1 • Public • Published

react-accessible-menu

Accessible keyboard-friendly interactive list/menu component

Features

  • List items can be navigated with Arrow keys, Home, End and letter keys for quick navigation
  • ARIA attributes and other accessibility attributes are automatically bound
  • Unopinionated, allows completely customized render logic and arbitrary DOM nesting (Demo 1, Demo 2)
  • Tiny in size and with minimal performance overhead
  • Trivially virtualizable (Demo)
  • Provides both a component-based and hook-based interface (Demo)
  • Typed with Typescript
  • Supports dynamic updates to list (Demo)

Installation

To start using react-accessible-menu, install it to your project as a dependency via

npm install react-accessible-menu

then import it and add your menu with

import { Menu, MenuItem } from 'react-accessible-menu';

<Menu
  renderMenu={({ props, ref }) => (
    <div className="list" ref={ref} {...props}>
      <MenuItem<HTMLButtonElement>
        renderItem={({ props, ref,  }) => (
          <button {...props} ref={ref} className="item">
            Apple
          </button>
        )}
      />
      <MenuItem<HTMLButtonElement>
        renderItem={({ props, ref,  }) => (
          <button {...props} ref={ref} className="item">
            Orange
          </button>
        )}
      />
    </div>
  )}
/>

You can find more examples in the Project's Storybook.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.1
    13
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.1
    13
  • 1.0.0
    0

Package Sidebar

Install

npm i react-accessible-menu

Weekly Downloads

13

Version

1.0.1

License

MIT

Unpacked Size

189 kB

Total Files

81

Last publish

Collaborators

  • lukasbach