sudharsan1988 / react-google-places-suggest

React component to select geolocated suggestion from Google Maps Places API

react-google-places-suggest

React component to select geolocated suggestion from Google Maps Places API

Install

npm install --save react-google-places-suggest

Changelog

See changelog

Usage

import React, {Component} from "react"
import GoogleMapLoader from "react-google-maps-loader"
import GooglePlacesSuggest from "react-google-places-suggest"
import "react-google-places-suggest/lib/index.css"

const MY_API_KEY = "AIzaSyDwsdjfskhdbfjsdjbfksiTgnoriOAoUOgsUqOs10J0" // fake

export default class MyGoogleSuggest extends Component {
  state = {
    search: "",
    selectedCoordinate: null,
  }

  handleSearchChange = (e) => {
    this.setState({search: e.target.value})
  }

  handleSelectSuggest = (suggest, coordinate) => {
    this.setState({search: suggest.description, selectedCoordinate: coordinate})
  }

  render() {
    const {search} = this.state
    const {googleMaps} = this.props

    return (
      <GooglePlacesSuggest
        googleMaps={googleMaps}
        onSelectSuggest={this.handleSelectSuggest}
        search={search}
      >
        <input
          type="text"
          value={search }
          placeholder="Search a location"
          onChange={this.handleSearchChange}
        />
      </GooglePlacesSuggest>
    )
  }
}

export default GoogleMapLoader(MyGoogleSuggest, {
  libraries: ["places"],
  key: MY_API_KEY,
})

Props

• googleMaps: Object - injected by GoogleMapLoader,
• onSelectSuggest: Function with two parameters (onSelectSuggest: (suggest, coordinate) => {}),
• renderSuggest: Function with one parameter (renderSuggest: (suggest) => {}),
• search: String - the search query,
• suggestRadius: Number - default 20,
• textNoResults: String - default "No results",

Development

Clean lib folder

npm run clean

Build lib folder

npm run build

Build dist folder

npm run dist

Watch src folder

npm run watch

Lint src folder

npm run lint

License

See MIT