google-places-suggester

Google Places Auto Complete

npm install google-places-suggester

React Places Autocomplete

A React component to build a customized UI for Google Maps Places Autocomplete

1. Enable you to easily build a customized autocomplete dropdown powered by Google Maps Places Library
2. Utility functions to geocode and get latitude and longitude using Google Maps Geocoder API
3. Full control over rendering to integrate well with other libraries (e.g. Redux-Form)
4. Mobile friendly UX
5. WAI-ARIA compliant
6. Support Asynchronous Google script loading

Installation

To install the stable version

npm install --save google-places-suggester

React component is exported as a default export

import AddressAutoComplete from "google-places-suggester";

utility functions are named exports

Getting Started

Create your component

import React from "react";
import PlacesAutocomplete from "google-places-suggester";

<AddressAutoComplete
  google_api_key={"YOUR_API_KEY"}
  allowedCountries={["Array of allowed country codes"]}
  seperatedAddress={true | false}
/>;

Props

Prop	Type	Required	Description
google_api_key	string	✅	The Google API key to be used to show suggestions.
allowedCountries	string[]		An array of country codes to allow. Use an empty array to allow all countries.
separatedAddress	boolean		If true, the address will be returned as an object containing address, postalCode, city, country, and state separately. If false, it will only return an object with the address.
onChange	function	✅	Callback function to handle input changes.
label	string		Label for the input field.
className	string		CSS class name for styling.
styles	Object		CSS styles for customization.
onFocus	function		Callback function when the input field is focused.
onBlur	function		Callback function when the input field loses focus.
defaultValue	string		Default input value.
value	string		Input value.
ref	Object		Reference object for accessing the input element.
disabled	boolean		If true, the input is disabled.
onPaste	function		Callback function for handling paste events.
required	boolean		If true, the input is required.

<AddressAutoComplete
  google_api_key={"YOUR_API_KEY"}
  allowedCountries={["Array of allowed country codes"]}
  seperatedAddress={true | false}
  onChange={(value) => this.setState({ value })}
/>