1.0.1 • Published 4 years ago
use-google-places v1.0.1
React Hook useGooglePlaces
Hook to consume Google Places API returning both autocomplete with debounce and geocoding callback method
Flow
onChange<keyword> -> Fetch autocomplete -> results -> onSelect -> Fetch geocoding -> onSelect.callback<result>Installation
- TODO
Options
| 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 |
Methods
| 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> |
Usage
Component
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}
/>
)}
/>