react-autosuggest

React Autosuggest is a React component that adds dropdown suggestion behavior to text input fields. As a user types, the component shows a list of matching suggestions below the input and handles keyboard navigation, selection, and dismissal. The developer controls what suggestions appear, how they are fetched, and how each suggestion looks when rendered.

The component follows the WAI-ARIA specification for accessible autocomplete, which means it includes the correct HTML attributes and keyboard behavior for screen readers and keyboard-only navigation. It is also designed to work on mobile devices.

Adding the library to a project requires a single npm or yarn install command. From there, developers wire up a small set of functions: one that returns suggestions matching the current input, one that clears suggestions when the dropdown closes, one that determines the text value of a selected suggestion, and one that controls how each suggestion item appears on screen. The component is controlled, meaning the developer keeps the input value and suggestion list in their own application state. It works without extra configuration alongside state management tools like Redux.

Suggestions can be displayed as a single flat list or organized into labeled sections. They can come from a local data source or be fetched from an external API on each keystroke. The component supports several popular styling approaches, including CSS Modules and various CSS-in-JS libraries. There is an option to keep the suggestion list always visible, useful in modal dialogs or mobile interfaces where all options should appear up front. Developers can also configure when the list first appears, for example only after the user types two or more characters.

The original author no longer has time to maintain the project and has asked the community for new maintainers. The code and documentation remain available and the library continues to be widely used.