Skip to content

React Component used as a field in a form to autocomplete a place, using the Google Maps API.

License

Notifications You must be signed in to change notification settings

tasiodev/react-places-autocomplete

Repository files navigation

React Places Autocomplete

Component used as a field in a form to autocomplete a place, using the Google Maps API.

The place can be a city, a country, a street, or even an establishment.

alt text

Demo

https://react-places-autocomplete-demo.up.railway.app

Features

  • Map with the selected place
  • Limit the type of places you want to retrieve
  • Fully customizable

Requisites

To use this component, you will need a Google API key. Here is more information on how to obtain it: https://developers.google.com/maps/documentation/javascript/get-api-key

You will also need to enable these two APIs:

  • Places API
  • Maps JavaScript API

Exposing your API key in the front-end code of your application can pose significant security risks. Unauthorized access to your API key may lead to unauthorized usage.

Is highly recommended to store it in a separate configuration file, such as the .env file.

Additionally, we strongly recommend that you restrict the usage of your API key using the available configuration options. https://developers.google.com/maps/api-security-best-practices#restrict_apikey

Installation and Basic Example

  npm install @tasiodev/react-places-autocomplete
import { useState } from 'react'
import PlacesPicker from '@tasiodev/react-places-autocomplete'

function App() {
  const [value, setValue] = useState(null)
  return  <PlacesPicker
        gMapsKey='*******************'
        placeId={value}
        onChange={setValue}
      />
}

Props Reference

Parameter Type Description
gMapsKey string Required. Your API key
placeId string Id used to load an initial or stored place
onChange func Event triggered when user select a place or when user starts typing to search a place
onSelectPlace func Event triggered when user select a place
placeholder string Placeholder for input
searchTypes array[string] Limit the place types return in a search. See: https://developers.google.com/maps/documentation/places/web-service/supported_types
language string ISO code for map and results language. Default: "en"
disableMap bool Boolean to disable place Map. Default: false
mapExpanded bool If true, the map is always visible. Default: false
disabled bool Boolean to disable input
customStyles object Object to override styles of each element. See definitions

customStyles example

{
    container: { backgroundColor: 'black' },
    fieldInput: { color: 'red' },
    searchResultsContainer: { marginTop: 12 },
    searchResult: { padding: 6 },
    gmapContainer: { padding: 8, height: 400 },
}