slick-react-multiselect-dropdown

Slick React Multiselect Dropdown

A very lightweight and simple multiple selection dropdown component with search

✨ Features

• 🕶 Zero Dependency
• 🍃 Lightweight (<5KB)
• ✌ Written w/ TypeScript
• ⌨ Keyboard navigation to search, move, close dropddown items
• 🔍 Search character hightlights
• 💄 Fully themable

🔧 Installation

npm i slick-react-multiselect-dropdown    # npm
yarn add slick-react-multiselect-dropdown # yarn

📦 Example

 const listItems = [
    { label: "Apple 🍎", key: "apple" },
    { label: "Unicorn 🦄", key: "unicorn" },
    { label: "Burger 🍔", key: "burder" },
    { label: "Cheers 🥂", key: "cheers" },
  ];

  const [selectedItem, setSelectedItem] = useState([]);

   <MultiSelect
        placeholder="Select from list"
        list={listItems}
        selectedItems={selectedItem}
        setSelectedItems={setSelectedItem}
    />

💄 Themable

color values for selected Items could be in all css accepted formats. such as #cece rgb(254 242 242) green

  const colorSelectedItem = {
    { border: "red", background: "rgb(254 242 242)" }
  }

   <MultiSelect
        placeholder="Select from list"
        list= {listItems}
        selectedItems= {selectedItem}
        setSelectedItems= {setSelectedItem}
        colorSelectedItem= {colorSelectedItem}
    />

Result

Wrap Items

Types

export type Item = { label: string; key: string };

export type IProps = {
  placeholder?: string;
  list: Item[];
  selectedItems: Item[];
  setSelectedItems: any;
  enableSearch?: boolean;
  colorSelectedItem?: { border: string; background: string };
  selectBoxcss?: {}; // any inline css properties e.g  selectBoxcss={{padding: '.2rem'}}
};