React Hook useGooglePlaces
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 |
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}
/>
)}
/>