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

Include this script at the bottom of your body tag inside of your index.html file. Include your API Key.

<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 (
<PlacesAutocomplete
value={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 purpose
const 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.