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 | :white_check_mark: | 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 | :white_check_mark: | 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 })}
/>