react-multiselect-virtualized v1.0.2

React MultiSelect Dropdown Component

A highly customizable and performant dropdown component for React that supports single and multi-select modes, with built-in search functionality and virtualized rendering for large datasets.

Requirements

• React 18 or later
• Node.js 14 or later

Installation

# First install the required peer dependencies
npm install react-window memoize-one

# Then install the component
npm install react-multiselect-dropdown
# or
yarn add react-multiselect-dropdown

Dependencies

This component has the following peer dependencies:

• react-window: For virtualized list rendering
• memoize-one: For performance optimization

These must be installed alongside the component.

Features

• 🎯 Single & Multi-select modes: Switch between single and multi-select modes using the multiSelect prop
• 🔍 Search functionality: Easily search through large datasets
• ⚡ Virtualized list: Optimized for performance with large datasets (10,000+ items)
• 🎨 Customizable styling: Fully customizable colors, sizes, and styles
• ✅ Checkmark indicators: Visual feedback for selected items
• 🗑️ Clear all selections: Built-in button to clear all selections
• 📱 Responsive design: Works seamlessly across devices
• ♿ Accessibility support: Keyboard navigation and ARIA labels

Installation

Install the component using npm or yarn:

npm install react-multiselect-dropdown
# or
yarn add react-multiselect-dropdown

Basic Usage

Here's a simple example of how to use the MultiSelectDropdown component:

import React, { useState } from "react";
import MultiSelectDropdown from "react-multiselect-virtualized";
const generateItems = (count) =>
  Array.from({ length: count }, (_, i) => ({
    title: `Item ${i + 1}`,
    value: i + 1,
  }));
export const Test = () => {
  const [items] = useState(() => generateItems(100000));
  const [selected, setSelected] = useState([]);
  console.log("selected", selected);

  return (
    <MultiSelectDropdown
      data={items}
      onChange={setSelected}
      multiSelect={true}
      showSelected
      height="300px"
      width="300px"
    />
  );
};

Props

Examples

Multi-Select Mode

<MultiSelectDropdown
  data={items}
  onChange={setSelected}
  multiSelect={true}
  height="300px"
  showSelected={true}
  maxDisplayItems={3}
  selectedColor="#e3f2fd"
  checkmarkColor="#2196f3"
/>

Single-Select Mode

<MultiSelectDropdown
  data={items}
  onChange={setSelected}
  multiSelect={false}
  placeholder="Choose one item"
  selectedColor="#f5f5f5"
/>

Custom Styling

<MultiSelectDropdown
  data={items}
  backgroundColor="#2c3e50"
  textColor="#ecf0f1"
  hoverColor="#34495e"
  selectedColor="#2980b9"
  checkmarkColor="#2ecc71"
  inputHeight="45px"
  dropdownStyles={{
    border: "2px solid #3498db",
    borderRadius: "8px",
  }}
/>

Styling Guide

Customize the appearance of the dropdown using the following props:

• backgroundColor: Main background color of the dropdown
• textColor: Text color of the items
• hoverColor: Background color of items on hover
• selectedColor: Background color of selected items
• checkmarkColor: Color of the checkmark icon
• clearButtonColor: Color of the clear (×) button

License

This project is licensed under the MIT License. See the LICENSE file for details.