Dropshift
Inspired by Downshift, this library intends to provide solutions for people wanting to add accessible navigation dropdowns to their apps.
Why not Downshift?
Downshift works primarily as a combobox, that is to say, a text input and a select input combined. As such it, at the very least, expects a list of items, from which one can 'select' an item. These behaviours collide with user expectations when dealing with a navigation dropdown. Link items should focus when tabbing through the page, unlike Downshift, which uses arrow-keys for item to item navigation. This library is meant for non-selectable items (actionable items) and does not intend to support complexities like nested dropdown lists.
Install
npm install --save dropshift
Usage
import React Component Fragment from 'react' import Dropshift from 'dropshift' { return <Dropshift> getToggleButtonProps getMenuProps isOpen <Fragment> <button > Menu </button> <nav > //...links here </nav> </Fragment> </Dropshift> }
License
MIT © vidjuheffex