JSPM – react-google-autocomplete@2.0.0

Package Exports

react-google-autocomplete

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-google-autocomplete) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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={(place) => console.log(place)}
/>

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

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

Props

apiKey: pass to automatically load the Google maps scripts. The api key can be found in your google cloud console.
ref: React ref to be assigned the underlying text input ref.
autocompleteRef: React ref to be assigned the google autocomplete instance.
onPlaceSelected: (place: PlaceResult, inputRef, autocompleteRef) => void: The function gets invoked every time a user chooses location.
options: Google autocomplete options.
- options.types: By default it uses (cities).
- options.fields: By default it uses address_components, geometry.location, place_id, formatted_address.
inputAutocompleteValue: Autocomplete value to be set to the underlying input.
googleMapsScriptBaseUrl: Provide custom google maps url. By default https://maps.googleapis.com/maps/api/js
defaultValue prop is used for setting up the default value e.g defaultValue={'Amsterdam'}.

You can pass any prop specified for the hmtl input tag. You can also set options.fields prop if you need extra information, now it defaults to basic data in order to control expenses.

Examples

Simple autocomplete with options

import Autocomplete from "react-google-autocomplete";

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

Passing refs

import Autocomplete from "react-google-autocomplete";

const inputRef = useRef(null);

useEffect(() => {
  // focus on mount
  inputRef.current.focus()
}, [])

<Autocomplete
  ref={inputRef}
  onPlaceSelected={(place) => {
    console.log(place);
  }}
/>;

Getting access to the google autocomplete instance

import Autocomplete from "react-google-autocomplete";

const autocompleteRef = useRef(null);

<Autocomplete
  autocompleteRef={autocompleteRef}
  onPlaceSelected={(place, inputRef, theSameAutocompletRef) => {
    console.log(place);
  }}
/>;

<button onClick={() => autocompleteRef.current.getPlace()}>Read place</button>;

Typescript

We are planning on adding 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 apiKey="123" />;

More examples(dynamic props, MaterialUI) how to use the lib could be found in `examples/index.js`

Video of the example

TODO

Check that it fully works with SSR
Add eslint config(base-airbnb)
Rewrite the lib to TS and add flow support

Contribution

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

react-google-autocomplete