USE-PLACES-AUTOCOMPLETE

This is a React hook for Google Maps Places Autocomplete, which helps you build a UI component with the feature of place autocomplete easily! By leveraging the power of Google Maps Places API, you can provide a great UX (user experience) for user interacts with your search bar or form, etc. Hope you guys 👍🏻 it.

❤️ it? ⭐️ it on GitHub or Tweet about it.


Live Demo

!demo

⚡️ Try yourself: https://use-places-autocomplete.netlify.app

Features

- 🧠 Provides intelligent places suggestions powered by Google Maps Places API.
- 🎣 Builds your own customized autocomplete UI by React hook.
- 🔧 Utility functions to do geocoding and get geographic coordinates using Google Maps Geocoding API.
- 🤑 Built-in cache mechanism for you to save the cost of Google APIs.
- 💰 Built-in debounce mechanism for you to lower the cost of Google APIs.
- 🚀 Supports asynchronous Google script loading.
- 📜 Supports TypeScript type definition.
- ⌨️ Builds a UX-rich component (e.g. WAI-ARIA compliant and keyword support) via comprehensive demo code.
- 🦔 Tiny size (~ 1.7KB gzipped). No external dependencies, aside from the react.

Requirement

To use use-places-autocomplete, you must use react@16.8.0 or greater which includes hooks.

Installation

This package is distributed via npm.

``sh
$ yarn add use-places-autocomplete


or


$ npm install --save use-places-autocomplete
`

When working with TypeScript you need to install the @types/google.maps as a devDependencies.

`sh
$ yarn add --dev @types/google.maps


or


$ npm install --save-dev @types/google.maps
`

Getting Started

usePlacesAutocomplete is based on the Places Autocomplete (or more specific docs) of Google Maps Place API. If you are unfamiliar with these APIs, we recommend you review them before we start.

$3

To use this hook, there're two things we need to do:

1. Enable Google Maps Places API.
2. Get an API key.

$3

Use the script tag to load the library in your project and pass the value of the callback parameter to the callbackName option.

`js
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=YOUR_CALLBACK_NAME"
>
`

> ⚠️ If you got a global function not found error. Make sure usePlaceAutocomplete is declared before the script was loaded. You can use the async or defer attribute of the