A React hook that lets you create a UI component with the feature of place autocomplete using Google Maps API.
Basic Usage:
1. Install & Import the component.
# Yarn $ yarn add use-places-autocomplete # NPM $ npm i use-places-autocomplete
import React from "react"; import usePlacesAutocomplete, { getGeocode, getLatLng, } from "use-places-autocomplete";
2. Import the necessary Google Maps API.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"></script>
3. Basic usage:
const PlacesAutocomplete = () => { const { ready, value, suggestions: { status, data }, setValue, clearSuggestions, } = usePlacesAutocomplete({ requestOptions: { /* Define search scope here */ }, debounce: 300, }); const ref = useOnclickOutside(() => { // When user clicks outside of the component, we can dismiss // the searched suggestions by calling this method clearSuggestions(); }); const handleInput = (e) => { // Update the keyword of the input element setValue(e.target.value); }; const handleSelect = ({ description }) => () => { // When user selects a place, we can replace the keyword without request data from API // by setting the second parameter to "false" setValue(description, false); clearSuggestions(); // Get latitude and longitude via utility functions getGeocode({ address: description }) .then((results) => getLatLng(results[0])) .then(({ lat, lng }) => { console.log("📍 Coordinates: ", { lat, lng }); }) .catch((error) => { console.log("Error: ", error); }); }; const renderSuggestions = () => data.map((suggestion) => { const { id, structured_formatting: { main_text, secondary_text }, } = suggestion; return ( <li key={id} onClick={handleSelect(suggestion)}> <strong>{main_text}</strong> <small>{secondary_text}</small> </li> ); }); return ( <div ref={ref}> <input value={value} onChange={handleInput} disabled={!ready} placeholder="Where are you going?" /> {/* We can use the "status" to decide whether we should display the dropdown or not */} {status === "OK" && <ul>{renderSuggestions()}</ul>} </div> ); };
Preview:
Download Details:
Author: wellyshen
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/wellyshen/use-places-autocomplete
License: MIT