google-places-suggester

1.1.1 • Public • Published

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

Dependents (0)

Package Sidebar

Install

npm i google-places-suggester

Weekly Downloads

2

Version

1.1.1

License

ISC

Unpacked Size

14.9 kB

Total Files

5

Last publish

Collaborators

  • danyyal