Basics

Install

npm install --save react-google-places-autocomplete

or

yarn add react-google-places-autocomplete

Basic Usage

Load Google Maps JavaScript API

First, generate an apiKey in order to use it to load Google Maps JavaScript API. Then, use it to load it in your HTML file, adding a script tag:

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

Note: if you pass down the apiKey prop to the component, you can skip loading the Google Maps JavaScript API, as the component will inject that script on the page.

Use the component

import React from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';

const Component = () => (
  <div>
    <GooglePlacesAutocomplete />
  </div>
);

export default Component;

Save the selected result

import React, { useState } from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';

const Component = () => (
  const [value, setValue] = useState(null);

  return (
    <div>
      <GooglePlacesAutocomplete
        selectProps={{
          value,
          onChange: setValue,
        }}
      />
    </div>
  );
}