react-google-autocomplete

What is react-google-autocomplete?

The react-google-autocomplete package is a React component that provides an easy way to integrate Google Places Autocomplete into your React applications. It allows users to search for and select location-based suggestions, which can be used for various purposes such as filling out address forms, location-based searches, and more.

What are react-google-autocomplete's main functionalities?

Basic Autocomplete

This feature allows you to integrate a basic Google Places Autocomplete input field into your React application. When a user selects a place, the place details are logged to the console.

import React from 'react';
import ReactGoogleAutocomplete from 'react-google-autocomplete';

function App() {
  return (
    <div>
      <h1>Google Autocomplete Example</h1>
      <ReactGoogleAutocomplete
        apiKey="YOUR_GOOGLE_API_KEY"
        onPlaceSelected={(place) => {
          console.log(place);
        }}
      />
    </div>
  );
}

export default App;

Restricting Search to Specific Types

This feature allows you to restrict the autocomplete suggestions to specific types, such as regions. This can be useful if you want to limit the search to certain categories of places.

import React from 'react';
import ReactGoogleAutocomplete from 'react-google-autocomplete';

function App() {
  return (
    <div>
      <h1>Google Autocomplete with Type Restriction</h1>
      <ReactGoogleAutocomplete
        apiKey="YOUR_GOOGLE_API_KEY"
        types={['(regions)']}
        onPlaceSelected={(place) => {
          console.log(place);
        }}
      />
    </div>
  );
}

export default App;

Restricting Search to Specific Countries

This feature allows you to restrict the autocomplete suggestions to a specific country. This can be useful if your application is targeted towards users in a particular country.

import React from 'react';
import ReactGoogleAutocomplete from 'react-google-autocomplete';

function App() {
  return (
    <div>
      <h1>Google Autocomplete with Country Restriction</h1>
      <ReactGoogleAutocomplete
        apiKey="YOUR_GOOGLE_API_KEY"
        componentRestrictions={{ country: 'us' }}
        onPlaceSelected={(place) => {
          console.log(place);
        }}
      />
    </div>
  );
}

export default App;

Other packages similar to react-google-autocomplete

react-places-autocomplete

The react-places-autocomplete package is another React component for integrating Google Places Autocomplete into your application. It offers similar functionality to react-google-autocomplete, including the ability to restrict search results by types and countries. However, it provides more customization options for rendering the autocomplete suggestions.

react-geosuggest

The react-geosuggest package is a React component for Google Maps Places Autocomplete. It provides similar functionality to react-google-autocomplete but also includes additional features such as custom styling and event handling. It is a good alternative if you need more control over the appearance and behavior of the autocomplete component.

README

React google autocomplete

This is a simple react component for working with google autocomplete

Install

npm i react-google-autocomplete --save

or

yarn add react-google-autocomplete

---

As of version 1.2.4, you can now pass an apiKey prop to automatically load the Google maps scripts. The api key can be found in your google cloud console.

<AutoComplete
  apiKey={YOUR_GOOGLE_MAPS_API_KEY}
  onPlaceSelected={(place) => console.log(place)}
/>

Alternatively if not passing the apiKey prop, you can include google autocomplete link api in your app. Somewhere in index.html or somewhere else. More info here

<script
  type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=places"
></script>

Props

• apiKey: pass to automatically load the Google maps scripts. The api key can be found in your google cloud console.

• ref: React ref to be assigned the underlying text input ref.

• autocompleteRef: React ref to be assigned the google autocomplete instance.

• onPlaceSelected: (place: PlaceResult, inputRef, autocompleteRef) => void: The function gets invoked every time a user chooses location.

• options: Google autocomplete options.

  • options.types: By default it uses (cities).
  • options.fields: By default it uses address_components, geometry.location, place_id, formatted_address.

• inputAutocompleteValue: Autocomplete value to be set to the underlying input.

• googleMapsScriptBaseUrl: Provide custom google maps url. By default https://maps.googleapis.com/maps/api/js

• defaultValue prop is used for setting up the default value e.g defaultValue={'Amsterdam'}.

You can pass any prop specified for the hmtl input tag. You can also set options.fields prop if you need extra information, now it defaults to basic data in order to control expenses.

Examples

Simple autocomplete with options

import Autocomplete from "react-google-autocomplete";

<Autocomplete
  apiKey={YOUR_GOOGLE_MAPS_API_KEY}
  style={{ width: "90%" }}
  onPlaceSelected={(place) => {
    console.log(place);
  }}
  options={{
    types: ["(regions)"],
    componentRestrictions: { country: "ru" },
  }}
  defaultValue="Amsterdam"
/>;

Passing refs

import Autocomplete from "react-google-autocomplete";

const inputRef = useRef(null);

useEffect(() => {
  // focus on mount
  inputRef.current.focus()
}, [])

<Autocomplete
  ref={inputRef}
  onPlaceSelected={(place) => {
    console.log(place);
  }}
/>;

Getting access to the google autocomplete instance

import Autocomplete from "react-google-autocomplete";

const autocompleteRef = useRef(null);

<Autocomplete
  autocompleteRef={autocompleteRef}
  onPlaceSelected={(place, inputRef, theSameAutocompletRef) => {
    console.log(place);
  }}
/>;

<button onClick={() => autocompleteRef.current.getPlace()}>Read place</button>;

Typescript

We are planning on rewritting the library with TS/Flow in the later releases but you can already use it with TypeScript.

import Autocomplete from "react-google-autocomplete";

<Autocomplete apiKey="123" />;

More examples(dynamic props, MaterialUI) how to use the lib could be found in docs/examples.js

TODO

• Check that it fully works with SSR
• Add eslint config(base-airbnb)
• Rewrite the lib to TS and add flow support

Contribution

If you would like to see something in this library please create an issue and I will implement it as soon as possible.