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

You also have to include google autocomplete link api in your app. Somewhere in index.html or somwhere else.

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

Example

import Autocomplete from 'react-google-autocomplete';

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

The component has one function called onPlaceSelected. The function gets invoked every time a user chooses location. A types props means type of places in google place API. By default it uses (cities). A componentRestrictions prop by default is empty. A bounds prop by default is empty. You also can pass any props you want to the final input. You can also set fields prop if you need extra information, now it defaults to basic data in order to control expenses.

Contribution

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