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})
    }

    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
                            onSelectSuggest={this.handleSelectSuggest}
                            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	-
onSelectSuggest	function	Handle click on suggest	(geocodedPrediction, originalPrediction) => {console.log(geocodedPrediction, originalPrediction)}
customRender	function	Customize list item	prediction => prediction ? prediction.description : "no results"
customContainerRender	function	Customize list	`items => {items.map(item => {item.description})}
autocompletionRequest	object	Google map object Object	{input: "Toulouse"}
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