Hook to consume Google Places API returning both autocomplete with debounce and geocoding callback method
onChange<keyword> -> Fetch autocomplete -> results -> onSelect -> Fetch geocoding -> onSelect.callback<result>
yarn add use-google-places
# or
npm i use-google-places
Prop | Description | Default |
---|---|---|
apiKey |
Client-side google api key (documentation)[https://developers.google.com/places/web-service/get-api-key]. | None |
delay |
debounce OnChange (milliseconds). | 0 |
Prop | Description | Type |
---|---|---|
loading |
Triggers each request. | boolean |
results |
Normalized Google API (predictions)[https://developers.google.com/places/web-service/autocomplete#place_autocomplete_responses]. | {title, subtitle, placeId, description} |
onChange |
Function that triggers autocomplete. | function<string> |
onSelect |
Optional function that triggers geocoding executing a callback with coordinates and details. | function<{placeId}, callback<geocoding-payload> |
const { loading, results, onChange, onSelect } = useGooglePlaces({
apiKey: 'my-google-api-key',
delay: 400,
});
...
const onPress = item => {
onSelect(item, ({ coordinates }) => {
dispatch({
type: SET_LOCATION,
payload: coordinates,
});
});
};
...
<FlatList
data={results}
renderItem={({ item }) => (
<LocationItem
title={item.title}
subtitle={item.subtitle}
onPress={onPress}
/>
)}
/>