JSPM

React google autocomplete

This is a simple react component for working with google autocomplete

Install

npm i react-google-autocomplete --save

As of version 1.2.4, you can now pass an apiKey prop to automatically load the Google maps scripts. The api key can be found in your google cloud console.

<AutoComplete
  apiKey={YOUR_GOOGLE_MAPS_API_KEY}
  onPlaceSelected={() => "do something on select"}
/>

Alternatively if not passing the apiKey prop, you can include google autocomplete link api in your app. Somewhere in index.html or somewhere else.

<script
  type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=places"
></script>

Example

import Autocomplete from "react-google-autocomplete";

<Autocomplete
  style={{ width: "90%" }}
  onPlaceSelected={(place) => {
    console.log(place);
  }}
  types={["(regions)"]}
  componentRestrictions={{ country: "ru" }}
/>;

Typescript

We are planning on adding a full support for TS and Flow in the later releases.

import Autocomplete, {
  ReactGoogleAutocomplete,
} from "react-google-autocomplete";

const AutocompleteTS: FC<ReactGoogleAutocomplete> = Autocomplete as FC<ReactGoogleAutocomplete>;

<AutocompleteTS key="123" />

The component has one function called onPlaceSelected. The function gets invoked every time a user chooses location. A types props means type of places in google place API. By default it uses (cities). A componentRestrictions prop by default is empty. A bounds prop by default is empty. You also can pass any props you want to the final input. You can also set fields prop if you need extra information, now it defaults to basic data in order to control expenses. The options(optional) prop is the optional configuration to your Autocomplete instance. You can see full options here

Contribution

If you would like to see something in this library please create an issue and I will implement it as soon as possible.