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

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

📦 Example

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

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

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

`ts

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

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

Result

Wrap Items

Types

`ts
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'}}
};
``