use-google-places

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}
      />
    )}
  />