React component to select geolocated suggestion from Google Maps Places API
npm install react-google-places-suggest[![npm package][npm-badge]][npm] [![Travis][build-badge]][build]
[![Codecov][codecov-badge]][codecov] ![Module formats][module-formats]
React component to select geolocated suggestion from Google Maps Places API

You can download react-google-places-suggest from the NPM registry via thenpm or yarn commands
``shell`
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
`html`
https://unpkg.com/react-google-places-suggest/umd/react-google-places-suggest.js
`js
import React, {Component} from "react"
import ReactGoogleMapLoader from "react-google-maps-loader"
import ReactGooglePlacesSuggest 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 (
key: MY_API_KEY,
libraries: "places,geocode",
}}
render={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 => (
Demo
See [Demo page][github-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 => |
| 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][github-issue].
- Pull requests must be accompanied by passing automated tests (
npm test`).See CONTRIBUTING.md guidelines
See CHANGELOG.md
This project is licensed under the MIT License - see the
LICENCE.md file for details
[npm-badge]: https://img.shields.io/npm/v/react-google-places-suggest.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-google-places-suggest
[build-badge]: https://img.shields.io/travis/cedricdelpoux/react-google-places-suggest/master.svg?style=flat-square
[build]: https://travis-ci.org/cedricdelpoux/react-google-places-suggest
[codecov-badge]: https://img.shields.io/codecov/c/github/cedricdelpoux/react-google-places-suggest.svg?style=flat-square
[codecov]: https://codecov.io/gh/cedricdelpoux/react-google-places-suggest
[module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
[github-page]: https://cedricdelpoux.github.io/react-google-places-suggest
[github-issue]: https://github.com/cedricdelpoux/react-google-places-suggest/issues/new