react-google-places-suggest
React component to select geolocated suggestion from Google Maps Places API
Getting started
You can download react-google-places-suggest
from the NPM registry via the npm
or yarn
commands
yarn add react-google-places-suggest npm install react-google-places-suggest --save
If you don't use package manager and you want to include react-google-places-suggest
directly in your html, you could get it from the UNPKG CDN
https://unpkg.com/react-google-places-suggest/umd/react-google-places-suggest.js
Usage
import React, {Component} from "react" import GoogleMapLoader from "react-google-maps-loader" import GooglePlacesSuggest from "react-google-places-suggest" const MY_API_KEY = "AIzaSyDwsdjfskhdbfjsdjbfksiTgnoriOAoUOgsUqOs10J0" // fake export default class GoogleSuggest extends React.Component { state = { search: "", value: "", } handleInputChange = e => { this.setState({search: e.target.value, value: e.target.value}) } handleSelectSuggest = (geocodedPrediction, originalPrediction) => { console.log(geocodedPrediction, originalPrediction) // eslint-disable-line this.setState({search: "", value: geocodedPrediction.formatted_address}) } handleNoResult = () => { console.log('No results for ', this.state.search) } handleStatusUpdate = (status) => { console.log(status) } render() { const {search, value} = this.state return ( <ReactGoogleMapLoader params={{ key: MY_API_KEY, libraries: "places,geocode", }} render={googleMaps => googleMaps && ( <ReactGooglePlacesSuggest googleMaps={googleMaps} autocompletionRequest={{ input: search, // Optional options // https://developers.google.com/maps/documentation/javascript/reference?hl=fr#AutocompletionRequest }} // Optional props onNoResult={this.handleNoResult} onSelectSuggest={this.handleSelectSuggest} onStatusUpdate={this.handleStatusUpdate} textNoResults="My custom no results text" // null or "" if you want to disable the no results item customRender={prediction => ( <div className="customWrapper"> {prediction ? prediction.description : "My custom no results text"} </div> )} > <input type="text" value={value} placeholder="Search a location" onChange={this.handleInputChange} /> </ReactGooglePlacesSuggest> ) } /> ) } }
Demo
See Demo page
Props
Name | PropType | Description | Example |
---|---|---|---|
googleMaps | object | injected by react-google-maps-loader | - |
onNoResult | function | Handle no results when enter key is pressed | (geocodedPrediction, originalPrediction) => {console.log(geocodedPrediction, originalPrediction)} |
onSelectSuggest | function | Handle click on suggest | (geocodedPrediction, originalPrediction) => {console.log(geocodedPrediction, originalPrediction)} |
onStatusUpdate | function | Handle places service status update | status => {console.log(status)} |
customRender | function | Customize list item | prediction => prediction ? prediction.description : "no results" |
customContainerRender | function | Customize list | items => <CustomWrapper>{items.map(item => <ItemWrapper>{item.description}</ItemWrapper>)} |
displayPoweredByGoogle | boolean | Display the "Powered By Google" logo as required by the Google Maps autocomplete terms and conditions. (defaults to true. Not included when using customContainerRender prop) | |
textNoResults | String | No results text, null to disable | No results |
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
npm test
).
See CONTRIBUTING.md guidelines
Changelog
See CHANGELOG.md
License
This project is licensed under the MIT License - see the LICENCE.md file for details