Props

interface GooglePlacesAutocompleteProps {
  apiKey?: string;                               // default: ''
  apiOptions?: ApiOptions;                       // default: { }
  autocompletionRequest?: AutocompletionRequest; // default: { }
  debounce?: number;                             // default: 300
  minLengthAutocomplete?: number;                // default: 0
  onLoadFailed?: (error: Error) => void;         // default: console.error
  selectProps?: SelectProps;                     // default: { }
  withSessionToken?: boolean;                    // default: false
}

Where SelectProps are the ones accepted by react-select.

apiKey

If this parameter is passed, the component will inject the Google Maps JavaScript API usign this apiKey. So there's no need to manually add the script tag to yout HTML document.

apiOptions

Object to configure the google script to inject. Let's see the shape this prop can take:

export interface ApiOptions {
  language?: string;
  region?: string;
}

Here's an example on how to use it:

<GooglePlacesAutocomplete
  apiKey="***************"
  apiOptions={{ language: 'fr', region: 'fr' }}
/>

Note: for more information check localization documentation.

autocompletionRequest

Autocompletion request object to add restrictions to the search. Let's see the shape this prop can take:

interface LatLng {
  lat: number;
  lng: number;
}

interface AutocompletionRequest {
  bounds?: [LatLng, LatLng];
  componentRestrictions?: { country: string | string[] };
  location?: LatLng;
  offset?: number;
  radius?: number;
  types?: string[];
}

Here's an example on how to use it:

<GooglePlacesAutocomplete
  autocompletionRequest={{
    bounds: [
      { lat: 50, lng: 50 },
      { lat: 100, lng: 100 }
    ],
    componentRestrictions: {
    country: ['us', 'ca', 'uy'],
    }
  }}
/>

Note: for more information check google documentation.

debounce

The number of milliseconds to delay before making a call to Google Maps API.

minLengthAutocomplete

Defines a minimum number of characters needed on the input in order to make requests to the Google's API.

onLoadFailed

Function to be called when the injection of the Google Maps JavaScript API fails due to network error.

For example:

<GooglePlacesAutocomplete
  onLoadFailed={(error) => (
    console.error("Could not inject Google script", error)
  )}
/>

selectProps

As this component uses react-select under the hood, this prop accepts everything that's accepted by it. You can check react-select props here.

For example, a really common use would be to use it as a controlled input:

const [value, setValue] = useState(null);

<GooglePlacesAutocomplete
  selectProps={{
    value,
    onChange: setValue,
  }}
/>

withSessionToken

If this prop is set to true, the component will handle changing the sessionToken on every session. To learn more about how this works refer to Google Places Session Token docs.