Hi guys, I want to introduce . It's a React.js for . With it you can build your own places autocomplete UI like the following demo easily! Hope you guys 👍🏻 it. use-places-autocomplete hook Google Maps Places Autocomplete ⚡️ 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 🔧 to do geocoding and get geographic coordinates using . Utility functions Google Maps Geocoding API 🤑 Built-in for you to save the cost of Google APIs. cache mechanism 💰 Built-in debounce mechanism for you to lower the cost of Google APIs. 🚀 Supports asynchronous Google script loading. 📜 Supports type definition. TypeScript ⌨️ Builds a UX-rich component (e.g. and keyword support) via comprehensive . WAI-ARIA compliant demo code 🦔 Tiny size ( ). No external dependencies, aside for the . ~ 1.7KB gzipped react How does it work? First, use the script tag to load the library in your project. <script src= "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places" ></script> Start to build our component. Check the out to learn more. API getGeocode, getLatLng, ready, value, setValue, clearSuggestions, } = usePlacesAutocomplete({ }, }); clearSuggestions(); }); setValue(e.target.value); }; clearSuggestions(); }); }; place_id, } = suggestion; ); }); ); }; import usePlacesAutocomplete, { } from "use-places-autocomplete" ; import useOnclickOutside from "react-cool-onclickoutside" ; const PlacesAutocomplete = () => { const { suggestions : { status, data }, 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 const handleInput = ( e ) => { // Update the keyword of the input element 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 ); // Get latitude and longitude via utility functions getGeocode({ address : description }).then( ( results ) => { const { lat, lng } = getLatLng(results[ 0 ]); console .log( "📍 Coordinates: " , { lat, lng }); const renderSuggestions = () => data.map( ( suggestion ) => { const { structured_formatting : { main_text, secondary_text }, return ( < li key = {place_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 > Easy right? This is the magic of the ✨. I just show you how does it work via the minimal example. However there're more things you can do for an UX rich autocomplete component, like and keyword support as my (check the ), a keyword clear button, search history etc. usePlacesAutocomplete WAI-ARIA compliant demo code 💡 is my other hook library, which can help you handle the interaction of user clicks outside of the component(s). react-cool-onclickoutside Thanks for reading, for more usage details checkout the project's GitHub page: https://github.com/wellyshen/use-places-autocomplete You can also install this package is distributed via . npm $ npm install --save use-places-autocomplete $ yarn add use-places-autocomplete # or When working with TypeScript you need to install the as a . @types/googlemaps devDependencies $ yarn add --dev @types /googlemaps # or $ npm install --save-dev @types /googlemaps
