Socket
Socket
Sign inDemoInstall

use-drop

Package Overview
Dependencies
3
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

use-drop

A minimalist approach to custom dropdowns.

    0.5.1latest
    GitHub
    npm

Version published
Maintainers
1
Weekly downloads
87
increased by20.83%

Weekly downloads

Readme

Source

use-drop npm

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

FAQs

Last updated on 09 Jun 2020

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc