← Back to Portfolio
Custom Dropdown
A generic, reusable React dropdown component with built-in search, async filtering, and full keyboard accessibility.
Overview
A fully-featured custom dropdown built with React 19 and TypeScript. The component is generic — it works with plain strings, objects, or any custom shape via renderOption/renderSelected props. Supports debounced local search, async onSearch override, multi-dropdown coordination through custom DOM events, outside-click detection, and complete ARIA markup.
Technologies Used
Key Features
- Generic <T> API — works with strings, objects, or any custom shape
- Built-in debounced search with async onSearch override
- Multi-dropdown coordination without shared state or context
- Keyboard accessible — Enter to select, Escape to close
- Full ARIA support: role="listbox", aria-expanded, aria-selected
Screenshots
