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:

npm install custom-select-react