Large Component Selector

A high-performance React select component designed for handling large datasets with built-in virtualization, async loading, and extensive customization options.

This project was developed after extensive effort to build a high-performance dropdown component capable of handling large datasets efficiently. Existing solutions often struggle with performance at scale or lack robust, interactive search capabilities.

I built a component using react-select/async and react-window, enabling virtualized rendering of large datasets along with rich, responsive search functionality. The result is a scalable and feature-rich selection component that combines performance with a smooth user experience.

Features

• 🚀 Virtualized Rendering - Efficiently handle thousands of items
• ⚡ Async Data Loading - Load data on-demand with pagination
• 🎨 Fully Customizable - Extensive theming and styling options
• 🔍 Smart Filtering - Multiple filter modes with debouncing
• 📱 Responsive - Works on all devices
• ♿ Accessible - ARIA compliant
• 🎯 TypeScript Support - Full type definitions included

Installation

npm install large-component-selector

or

yarn add large-component-selector

Quick Start

import React from 'react';
import LargeComponentSelector from 'large-component-selector';

function App() {
  const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  
  const handleSelect = (result) => {
    console.log('Selected:', result);
  };

  return (
    <LargeComponentSelector
      items={items}
      onSelectItem={handleSelect}
      placeholder="fruit"
    />
  );
}

Advanced Usage

With Objects

const items = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' },
];

<LargeComponentSelector
  items={items}
  valueKey="id"
  labelKey="name"
  onSelectItem={(result) => {
    console.log('Selected user:', result.selection);
  }}
/>

Custom Styling

<LargeComponentSelector
  items={items}
  backgroundColor="#1a1a1a"
  foregroundColor="#ffffff"
  accentColor="#3b82f6"
  borderColor="#374151"
  ringColor="#60a5fa"
/>

With Virtualization for Large Datasets

const largeDataset = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

<LargeComponentSelector
  items={largeDataset}
  virtualizedItemHeight={35}
  itemsPerPage={50}
  maxMenuHeight={300}
  initialLoadSize={100}
/>

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | Array<string \| object> | required | Array of options | | onSelectItem | Function | - | Callback when item is selected | | value | any | null | Controlled value | | defaultValue | any | null | Default selected value | | placeholder | string | "component" | Placeholder text | | isDisabled | boolean | false | Disable the selector | | isClearable | boolean | true | Show clear button | | isSearchable | boolean | true | Enable search | | valueKey | string | "value" | Object key for value | | labelKey | string | "label" | Object key for label | | filterMatchMode | string | "startsWith" | Filter mode: 'startsWith', 'includes', 'custom' | | virtualizedItemHeight | number | 35 | Height of each item in pixels | | itemsPerPage | number | 100 | Items to load per page | | debounceDelay | number | 150 | Debounce delay in ms |

Styling Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | backgroundColor | string | "#ffffff" | Background color | | foregroundColor | string | "#000000" | Text color | | accentColor | string | "#f3f4f6" | Hover/focus color | | borderColor | string | "#d1d5db" | Border color | | ringColor | string | "#3b82f6" | Focus ring color |

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Nithin Reddy