1.0.0 • Published 4 years ago
dropshift v1.0.0
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'
class Example extends Component {
render () {
return (
<Dropshift>
{
({getToggleButtonProps, getMenuProps, isOpen}) => (
<Fragment>
<button {...getToggleButtonProps()}>
Menu
</button>
<nav {...getMenuProps()}>
//...links here
</nav>
</Fragment>
)
}
</Dropshift>
)
}
}
License
MIT © vidjuheffex
1.0.0
4 years ago