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 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 (
            <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