react-google-autocomplete

You have two ways to load the Google Maps scripts required for the package to work:

1. Automatic Loading (Recommended)

Pass the apiKey prop to the Autocomplete component or the usePlacesWidget hook. This will automatically load the necessary Google Maps scripts.

Note: The Places API and Maps JavaScript API must both be enabled in your Google Cloud Console.

2. Manual Loading

If you do not provide an apiKey prop, you must manually include the Google Maps script in your application (e.g., in index.html).

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

<Autocomplete
  apiKey={YOUR_GOOGLE_MAPS_API_KEY}
  onPlaceSelected={(place) => console.log(place)}
/>

You can install the package using npm or yarn.

npm i react-google-autocomplete --save

# or

yarn add react-google-autocomplete

The usePlacesAutocompleteService hook accepts a single config object with the following properties:

• apiKey: Google API key (required unless Google Maps is loaded manually).
• googleMapsScriptBaseUrl: Custom Google Maps URL. Defaults to https://maps.googleapis.com/maps/api/js.
• debounce: Number of milliseconds to accumulate responses for.
• options: Default options passed to every request.
• sessionToken: If true, a session token will be attached to every request.
• language: The language code for results.
• libraries: Array of additional Google libraries to load (e.g., ['places']).

You can access the underlying Google Autocomplete instance through the onPlaceSelected callback or via the autocompleteRef returned by the usePlacesWidget hook.

// Using the Autocomplete component
<Autocomplete
  onPlaceSelected={(place, inputRef, autocomplete) => {
    console.log(autocomplete);
  }}
/>

// Using the usePlacesWidget hook
const { ref, autocompleteRef } = usePlacesWidget({
  apiKey: YOUR_GOOGLE_MAPS_API_KEY,
  onPlaceSelected: (place) => {
    console.log(place);
  },
});

Use the Autocomplete component for a quick, out-of-the-box implementation of Google Places autocomplete.

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"
/>;

Use the usePlacesWidget hook to attach Google Autocomplete functionality to your own custom input element via a ref.

import { usePlacesWidget } from "react-google-autocomplete";

export default () => {
  const { ref } = usePlacesWidget({
    apiKey: YOUR_GOOGLE_MAPS_API_KEY,
    onPlaceSelected: (place) => {
      console.log(place);
    },
    options: {
      types: ["(regions)"],
      componentRestrictions: { country: "ru" },
    },
  });

  return <input ref={ref} style={{ width: "90%" }} defaultValue="Amsterdam" />;
};

Arguments

usePlacesWidget accepts a single configuration object with the same properties as ReactGoogleAutocomplete props:

• apiKey
• ref
• onPlaceSelected
• onLoadFailed
• options
• inputAutocompleteValue
• googleMapsScriptBaseUrl

Returned Value

The hook returns an object containing:

• ref: A React ref to be assigned to your input element.
• autocompleteRef: The autocomplete instance.

The Autocomplete component is a simple HTML input component that provides the functionality of Google Places widgets. It can be used as a standalone input or customized via props.

import Autocomplete from "react-google-autocomplete";

<Autocomplete
  apiKey={YOUR_GOOGLE_MAPS_API_KEY}
  onPlaceSelected={(place) => {
    console.log(place);
  }}
/>;

The usePlacesWidget hook provides the same functionality as the ReactGoogleAutocomplete component but does not create any DOM elements. Instead, it returns a ref that you can attach to any existing input element.

import { usePlacesWidget } from "react-google-autocomplete";

export default () => {
  const { ref, autocompleteRef } = usePlacesWidget({
    apiKey: YOUR_GOOGLE_MAPS_API_KEY,
    onPlaceSelected: (place) => {
      console.log(place);
    }
  });

  return <AnyInput ref={ref} />;
}