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.