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(suggest) {
    console.log(suggest) // eslint-disable-line
    this.setState({search: "", value: suggest.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.bind(this)}
              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.bind(this)}
              />
            </ReactGooglePlacesSuggest>
          )
        }
      />
    )
  }
}

Demo

See Demo page

Props

Name	PropType	Description	Example
googleMaps	object	injected by `react-google-maps-loader`	-
onSelectSuggest	function	Handle click on suggest	`prediction => {console.log(prediction)}`
customRender	function	Customize list item	`prediction => prediction ? prediction.description : "no results"`
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

ernest-okot / react-google-places-suggest