moroshko/react-autosuggest
React Autosuggest
React Autosuggest is a fully controlled React component that provides an autocomplete input with a dropdown of suggestions as the user types. It delegates all state management to the parent component through callbacks, making it compatible with state management patterns like Flux or Redux. The component implements WAI-ARIA accessibility patterns, including keyboard navigation with arrow keys, Enter, and Escape, along with live region integration for screen reader announcements.
The component offers extensive customization through render-prop functions, allowing developers to replace the default input element and control how each suggestion is rendered, including support for grouped sections with headers. It provides scroll isolation within the suggestions container, preventing page scrolling when the list reaches its boundary. Styling can be applied through a theme object that works with any CSS solution, including CSS Modules, Radium, or JSS.
The component gives developers control over when suggestions are displayed, such as after a minimum character count or based on custom logic, and supports automatic highlighting of matched text. It handles long suggestion lists by rendering them in a scrollable container, and provides direct access to the underlying input element for DOM manipulation.