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

``jsx
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 (
options={options}
value={value}
onChange={setValue}
placeholder="Select a fruit"
/>
);
}
`

---

Multi Select Example

`jsx
options={options}
allowMultiSelect
allowSearch
onChange={(val) => console.log(val)}
/>
`
---

Search & Async Search

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

Search is debounced internally (400ms).

---

Persist Selection (LocalStorage)

`jsx
options={options}
storageKey="my-select-value"
/>
`

- Automatically saves selected value
- Restores value on refresh

---

Custom Option Rendering

`jsx
options={options}
renderOption={(option) => (



)}
/>
`

---

Keyboard Navigation (Custom)

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

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

$3


`jsx

`

$3

`jsx

``

---

Contributing

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

---