React App Address Autocomplete Search: react-places-autocomplete

npm install --save react-places-autocomplete
import PlacesAutocomplete from 'react-places-autocomplete';

Setup

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
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>);}}
'location-search-input'
'suggestion-item--active''suggestion-item'

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store