Autocompleting is an essential feature of any modern web application. Here I review top React libraries + a tutorial to build your own.

There are a lot of ways to implement autocomplete in React based on how the suggestions are filtered and presented. Here, you can find three Autocomplete libraries that are commonly used to implement the Autocomplete feature in React. I won’t stop there, I’ll also tell you how to implement your own autocomplete feature without using any library.

For code examples, we have used a fixed list of suggestions that are passed to the component.

You can find autocomplete components shared on Bit (Github), as well. I personally recommend you build your own component and share it on Bit to reuse in your future projects (see the last item on that list “React Autocomplete Component from Scratch”).

Downshift

Downshift is a set of primitives you can use to build simple, flexible, WAI-ARIA compliant enhanced input React components including Combobox or select dropdown components.

Downshift will be a perfect solution when you need an Autocomplete Combobox or a Select experience in your application that will follow the ARIA design pattern for a combobox or a select, depending on your use case.

It provides a set of React hooks. Each hook has the stateful logic you need to make the corresponding component functional and accessible.

These are the React hooks provided by Downshift.

• useSelect hook is used for a custom select component.
• useCombobox hook is used for a combobox/autocomplete input.
• useMultipleSelection hook is used for selecting multiple items in a select or a Combobox. It can also be used for deleting items from selection or navigating between the selected items.

Downshift also provides the Downshift component, which you can use to create accessible Combobox and select components. It provides the logic in the form of a render prop. You can use it to develop the hooks. It gives complete freedom to developers by providing a successful pattern for making components accessible and functional.

You can go to this site to find more information on how to use the hooks and the Downshift component. Each hook has its own README page. You can find the page related to hooks here.

#typescript #javascript #react #programming #developer