Top React Autocomplete Libraries in 2020

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.

You can install Downshift with npm or yarn.

npm install — save downshift

or

yarn add downshift

Here is a simple example of how you can use the Downshift component to select your favorite color.

The final result of this demo will look as follows:

This component relies primarily on Bootstrap for styling. Although it uses as little CSS as possible, some additional CSS is necessary for everything to behave correctly. The component contains Typeahead.css and Token.css with some minimal styling. You should include these provided CSS files in your project.

The behavior of the react-bootstrap-typeahead is similar to form elements. Suppose it’s like a Select element that you have to provide an array of options to be displayed. Although the component supports multi-selection, it allows single-selection by default. When you set the multiple prop, the component turns into a tokenizer.

The shape of your data is important for react-bootstrap-typeahead. You have to provide an array of objects. Each of these objects should have a string property to be used as the label for display. Although the key is named label, you can specify a different key using the labelKey prop.

As react-bootstrap-typeahead works with standard Bootstrap components and styles, it allows basic rendering for your data by default. It also provides more advanced options when needed.

You can install react-bootstrap-typeahead with npm or yarn.

npm install — save react-bootstrap-typeahead

Or

yarn add react-bootstrap-typeahead

Here is a simple example of how you can use the react-bootstrap-typehead component to select your favorite color. The code for this example is as follows:

App.js

The final result of this demo will look as follows:

Because use-places-autocomplete is based on the Places Autocomplete of Google Maps Place API, you can use it to build your own autocomplete for locations. So you can provide a great user experience for users who interact with your search bar or form and so on by leveraging the power of Google Maps Places API.

You can useuse-places-autocomplete to build a user experience rich component which is WAI-ARIA compliant. Other important features of use-places-autocomplete are it supports TypeScript type definition and asynchronous Google script loading.

It has a built-in debounce mechanism. So you can use it to lower the cost of Google APIs. use-places-autocomplete provides Utility functions that you can use to do geocoding and get geographic coordinates using Google Maps Geocoding API.

Withuse-places-autocomplete, you can build your own customized autocomplete UI with React hook. It will give you intelligent suggestions for locations powered by Google Maps Places API.

If you want to useuse-places-autocomplete in your React project, you must use react@16.8.0 or greater which includes hooks. You can installuse-places-autocomplete using npm or yarn as follows:

npm install — save use-places-autocomplete

or

yarn add use-places-autocomplete

You have to enable Google Maps Places API and get an API key to use this hook. To get started, first, you have to use the following script tag to load the library into your project.

<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Here is a simple example of how you can use the use-places-autocomplete hook to enter your city.

App.js

The final result of this demo will look as follows:

You have to pass a list of options to the autocomplete component as an array. You can get the options as an array from an AJAX request through API, or database, and pass it as the props the exact same way.

In this example, the Autocomplete component is rendered by Autocomplete.js. App.js is the App component that renders the Autocomplete component. These two components are required to make this React Autocomplete application possible.

The code for this example is as follows:

App.js

Autocomplete.js

The final result of this demo will look as follows:

So you can use them to create autocomplete components your users can enjoy. Furthermore, they will be helpful to reduce confusion and mistakes and your users will be able to quickly navigate their way through your application.

Author: admin

Leave a Reply

Your email address will not be published.