React component to select geolocated suggestion from Google Maps Places API
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo/src
src
.editorconfig
.eslintrc
.gitignore
.lintstagedrc
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENCE.md
README.md
jest.config.json
jest.transform.js
nwb.config.js
package.json
yarn.lock

README.md

react-google-places-suggest

npm package Travis Codecov Module formats

React component to select geolocated suggestion from Google Maps Places API

Getting started

react-google-places-suggest

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