custom-select-react/Readme.md

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.

# 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

### Required Props

- **`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' }]`.

### Optional Props

- **`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