use-drop

use-drop

A minimalist approach to custom dropdowns and autocompletes.

Features

• bring your own markup
• no magic
• full a11y support
• supports multi-select
• controlled, integrate with any form library

Install

npm i use-drop --save

Usage

import React from "react";
const cx from "classnames";

import { useSelect } from "use-drop";

function Dropdown() {
  const [label, lableSet] = React.useState("Please select");

  const {
    id,
    items,
    isOpen,
    getControlProps,
    getDropProps,
  } = useSelect({
    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" }
    ],
    onSelect(item) {
      labelSet(item.label); // set to active item
    },
    onRemove() {
      labelSet("Please select"); // reset to placeholder
    },
  });

  return (
    <>
      <label htmlFor={id}>Cities</label>
      <button id={id} controlProps={getControlProps()}>{label}</button>

      {isOpen && (
        <ul {...getDropProps()}>
          {items.map(i => (
            <li
              key={i.value}
              className={cx({
                'is-selected': i.selected,
                'is-highlighted': i.highlighted,
              })}
              {...i.getItemProps()}
            >
              {i.label}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

License

MIT License © Eric Bailey