MultiSelectDropdown Component

The MultiSelectDropdown is a highly customizable React component that allows users to select multiple items from a dropdown list. It supports search functionality, custom styling, and a variety of configuration options.

Features

- Multi-Selection: Allows users to select multiple items.
- Search Functionality: Includes a search input field to filter items.
- Select All Option: Option to select all items at once.
- Customizable Placeholder Text: Customizable text for the placeholder and "Select All" option.
- Customizable Styles: You can customize the component’s styles by passing custom class names.
- Single-Selection Mode: Switch between multi-selection and single-selection modes.
- Click Outside to Close: The dropdown automatically closes when you click outside the component.
- Dynamic Rendering: Supports dynamic rendering of selected items with a counter for overflow.

Props

$3

- items: An array of items to be displayed in the dropdown. Each item can either be a string or an object with name and value properties.
- Example: ['Item 1', 'Item 2'] or [{ name: 'Item 1', value: 'item1' }, { name: 'Item 2', value: 'item2' }].

$3

- maxVisibleItems: Number of items to show in the dropdown before showing a counter. Default is 1.
- onSelectionChange: Callback function that gets called whenever the selected items change. It receives an array of selected item values.
- selectedValues: Send Array of Values to show default selected items.
- isMulti: Boolean to toggle between multi-selection and single-selection. Default is true.
- customClassNames: Object to pass custom class names for styling. You can override the default class names for various parts of the component.
- Example: { container: 'my-container', button: 'my-button' }.

### Customizable Styles

You can customize the following styles by passing appropriate class names in the customClassNames prop:

- container: The outermost container of the dropdown.
- button: The button used to open the dropdown.
- placeholder: The placeholder text inside the dropdown when no items are selected.
- selectedItems: The container for the selected items in the dropdown.
- selectedItem: The individual selected item in the dropdown.
- closeIcon: The close icon (usually an "X" or similar) to remove a selected item.
- itemCount: The counter that appears when there are more selected items than visible.
- caret: The caret (arrow) icon that indicates the dropdown is open or closed.
- caretOpen: The caret icon when the dropdown is open.
- dropdownList: The list of items displayed in the dropdown.
- searchBar: The container for the search input field.
- searchInput: The actual input field for searching items.
- dropdownItem: The individual item in the dropdown list.
- label: The label for the dropdown.
- singleSelectItem: The item selected in single-selection mode.

- placeholderText: Customizable placeholder text for the dropdown when no items are selected. Default is 'Select items'.
- selectAllText: Customizable text for the "Select All" checkbox. Default is 'Select All'.
- searchPlaceholderText: Customizable placeholder text for the search input. Default is 'Search...'.

Installation

To install the component in your React project:

```bash
npm install custom-select-react