Google-places-suggester NPM

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

Enable you to easily build a customized autocomplete dropdown powered by Google Maps Places Library
Utility functions to geocode and get latitude and longitude using Google Maps Geocoder API
Full control over rendering to integrate well with other libraries (e.g. Redux-Form)
Mobile friendly UX
WAI-ARIA compliant
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 })}
/>

@babel/preset-env @babel/preset-react @mui/material react-load-script sass

@everything-registry/sub-chunk-1778

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago