Before you go, check out these stories!

0
Hackernoon logoCreate your React.js Address Autocomplete Component in 10 minutes ⏰ by@welly

Create your React.js Address Autocomplete Component in 10 minutes ⏰

Author profile picture

@wellywelly

Code x Design ✨

Hi guys, I want to introduce use-places-autocomplete. It's a React.js hook for Google Maps Places Autocomplete. With it you can build your own places autocomplete UI like the following demo easily! Hope you guys 👍🏻 it.

⚡️ 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 debounce mechanism for you to lower the cost of Google APIs.
  • 🚀 Supports asynchronous Google script loading.
  • 📜 Supports TypeScript type definition.
  • ⌨️ Builds an UX rich component (e.g. WAI-ARIA compliant and keyword support) via comprehensive demo code.

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 API out to learn more.

import React from "react";
import usePlacesAutocomplete, {
  getGeocode,
  getLatLng,
} from "use-places-autocomplete";
import useOnclickOutside from "react-cool-onclickoutside";

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 as "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>
  );
};

Easy right? This is the magic of the usePlacesAutocomplete ✨. 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 WAI-ARIA compliant and keyword support as my demo (check the code), a keyword clear button, search history etc.

💡 react-cool-onclickoutside is my other hook library, which can help you handle the interaction of user clicks outside of the component(s).

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.

$ yarn add use-places-autocomplete
# or
$ npm install --save use-places-autocomplete

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!