Never Pay your Mortgage

    dropkit
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    dropkit npm

    A minimalist approach to custom dropdowns, autocompletes, and more.

    Features

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

    Install

    npm i dropkit --save
    

    Usage

    import React from "react";
    import cx from "classnames";
    
    import { useSelect } from "dropkit";
    
    function Dropdown() {
      const [label, labelSet] = 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} {...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>
          )}
        </>
      );
    }

    Credits

    Many thanks to @wmira for providing the dropkit npm package name. If you're looking for the Digital Ocean V2 REST API library, try v0.9.4 and below.

    License

    MIT License © Eric Bailey

    Keywords

    none

    Install

    npm i dropkit

    DownloadsWeekly Downloads

    60

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    93.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • estrattonbailey