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