🌟 React MultiSelect Component

A reusable, controlled/uncontrolled multi-select component for React with optional icons, descriptions, and full customization.

🚀 Features

• Controlled and uncontrolled modes
• Optional icon/description rendering
• Create new items if no match
• Debounced search logic
• Fully styled with TailwindCSS (or easily replaceable with your own classes)

📦 Installation

npm install react-multiselect-component

🧠 Usage

import MultiSelect from "react-multiselect-component";

const options = [
  { code: "React", description: "Frontend" },
  { code: "Node", description: "Backend" },
];

<MultiSelect
  options={options}
  value={selected}
  onChange={setSelected}
  showIcon={false}
  showDescription={true}
/>

🧰 Props

| Prop | Type | Description | |-----------------|-------------------------------------|-------------| | options | OptionType[] | Full list of options | | value | OptionType[] | Controlled selected values | | defaultValue | OptionType[] | Uncontrolled initial values | | onChange | (selected: OptionType[]) => void | Callback on selection change | | showIcon | boolean | Whether to show icons | | showDescription | boolean | Whether to show descriptions | | renderOption | (opt) => ReactNode | Custom render for dropdown option | | renderSelected | (opt) => ReactNode | Custom render for selected item | | inputClass | string | Optional class for input field |

🧪 Example

Run the included App.tsx in a Vite or React app to test.

📄 License

MIT