React App Address Autocomplete Search: react-places-autocomplete

So many applications use an input for user addresses whether it’s for payment processes or selecting a shipping location. I am going to walkthrough how to implement a search input that autocompletes addresses as the user types. I am going use a package called react-places-autocomplete which is powered by Google Places API. Let’s get started.

Installation

npm install --save react-places-autocomplete

Imports

import PlacesAutocomplete from 'react-places-autocomplete';

There are other imports to use the geocoding feature if you are implementing a map as well but I won’t be using that. You can find out how to implement on the documentation.

You are going to need to obtain a Places API key and enable both the Places API, and the Javascript Maps API if using a map feature. Register your project on Google Cloud Console here. You will need to do this in order to go to the next steps.

Setup

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

We can now start building our Search bar component. Copy the boilerplate code from the docs. The handleSelect function includes some imports we are not using. You can rewrite that function with whatever logic your application needs.

class LocationSearchInput extends React.Component {constructor(props) {super(props);this.state = { address: '' };}handleChange = address => {this.setState({ address });};handleSelect = address => {geocodeByAddress(address).then(results => getLatLng(results[0])).then(latLng => console.log('Success', latLng)).catch(error => console.error('Error', error));};render() {return (<PlacesAutocompletevalue={this.state.address}onChange={this.handleChange}onSelect={this.handleSelect}>{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (<div><input{...getInputProps({placeholder: 'Search Places ...',className: 'location-search-input',})}/><div className="autocomplete-dropdown-container">{loading && <div>Loading...</div>}{suggestions.map(suggestion => {const className = suggestion.active? 'suggestion-item--active': 'suggestion-item';// inline style for demonstration purposeconst style = suggestion.active? { backgroundColor: '#fafafa', cursor: 'pointer' }: { backgroundColor: '#ffffff', cursor: 'pointer' };return (<div{...getSuggestionItemProps(suggestion, {className,style,})}><span>{suggestion.description}</span></div>);})}</div></div>)}</PlacesAutocomplete>);}}

To customize the styles of the search bar take a look at the classNames you are given.

'location-search-input'

This is your search input, you can edit this element in your main css file using this className.

'suggestion-item--active''suggestion-item'

These classNames refers to the dropdown selections of the addresses. Also including the active suggestion when you hover over the selection.

The final product should look something like this… I customized the search input to be rounded and increased the padding in the dropdown.