React Custom Select Component

A flexible, fully customizable React Select / Multi-Select component with support for:

• Search & async search
• Single & Multi select
• Keyboard navigation
• LocalStorage persistence
• Custom rendering & styles
• Clear selection
• Disabled options
• Controlled & Uncontrolled usage

Features

• Single select & multi select
• Search with debounce
• Custom option rendering
• Keyboard navigation (↑ ↓ Enter)
• Highlighted options
• Clear button
• Outside click & Escape key handling
• Optional LocalStorage persistence
• Fully styleable via styles prop

Basic Usage

import Select from "@dhanesh-gkmit/react-custom-select";

const options = [
  { id: 1, label: "Apple" },
  { id: 2, label: "Banana" },
  { id: 3, label: "Mango" },
];

export default function App() {
  const [value, setValue] = useState(null);

  return (
    <Select
      options={options}
      value={value}
      onChange={setValue}
      placeholder="Select a fruit"
    />
  );
}

Multi Select Example

<Select
  options={options}
  allowMultiSelect
  allowSearch
  onChange={(val) => console.log(val)}
/>

Search & Async Search

<Select
  options={options}
  allowSearch
  onSearch={(query) => {
    console.log("Searching:", query);
  }}
/>

Search is debounced internally (400ms).

Persist Selection (LocalStorage)

<Select
  options={options}
  storageKey="my-select-value"
/>

• Automatically saves selected value
• Restores value on refresh

Custom Option Rendering

<Select
  options={options}
  renderOption={(option) => (
    <div>
      <strong>{option.label}</strong>
    </div>
  )}
/>

Keyboard Navigation (Custom)

<Select
  options={options}
  onKeyBoardNavigation={({ prevIndex, key, optionsLength }) => {
    if (key === "ArrowDown") return (prevIndex + 2) % optionsLength;
    if (key === "ArrowUp") return Math.max(prevIndex - 1, 0);
    return prevIndex;
  }}
/>

Styling

<Select
  options={options}
  styles={{
    wrapper: { width: "300px" },
    header: { borderColor: "blue" },
    option: { padding: "10px" },
    highlightedOption: { backgroundColor: "#eee" },
  }}
/>

Props Reference

| Prop | Type | Description | |-----|-----|------------| | options | Array | List of options { id, label } | | value | Object / Array | Controlled value | | defaultValue | Object / Array | Default selection | | onChange | Function | Selection change handler | | allowMultiSelect | boolean | Enable multi select | | allowSearch | boolean | Enable search | | onSearch | Function | Search callback | | onScroll | Function | Dropdown scroll handler | | allowClear | boolean | Show clear button | | storageKey | string | Persist value in LocalStorage | | isLoading | boolean | Show loading state | | renderOption | Function | Custom option UI | | styles | Object | Style overrides | | placeholder | string | Input placeholder |

Controlled vs Uncontrolled

Controlled

<Select value={value} onChange={setValue} />

Uncontrolled

<Select defaultValue={option} />

Contributing

PRs and suggestions are welcome!
If you find a bug or want a feature, open an issue