use-drop
A minimalist approach to custom dropdowns.
Features
- bring your own markup
- full a11y support
- supports multi-select
- controlled, integrate with any form library
Install
npm i use-drop --save
Usage
import { useDrop } from "use-drop";
function Dropdown() {
const [value, setValue] = React.useState();
const { label, items, isOpen, controlProps, dropdownProps } = useDropdown({
value,
placeholder: "Please select",
multiple: true,
items: [
{ value: "san-francisco", label: "San Francisco" },
{ value: "los-angeles", label: "Los Angeles" },
{ value: "san-diego", label: "San Diego" },
{ value: "new-york", label: "New York" },
{ value: "albany", label: "Albany" },
{ value: "rochester", label: "Rochester" }
],
onUpdate(value) {
setValue(value);
}
});
return (
<>
<button {...controlProps}>{label}</button>
<ul {...dropdownProps}>
{items.map(({
value,
label,
selected,
highlighted,
itemProps,
}) => (
<li key={label} {...itemProps}>{label}</li>
))}
</ul>
</>
);
}
License
MIT License © Truework