@anil-labs/google-places-autocomplete-react

React address autocomplete component built on Google's Places API (New).

Install

npm install @anil-labs/google-places-autocomplete-react

Usage

import { PlacesAutocomplete } from '@anil-labs/google-places-autocomplete-react'
import '@anil-labs/google-places-autocomplete-core/styles.css'
import type { PlaceDetails } from '@anil-labs/google-places-autocomplete-core'

export function App() {
  return (
    <PlacesAutocomplete
      apiKey="YOUR_API_KEY"
      placeholder="Search for an address…"
      onSelect={(place: PlaceDetails) => console.log(place.formattedAddress)}
      onError={(error) => console.error(error)}
    />
  )
}

Full documentation: React guide · getting started (Google Cloud setup) · API reference.

Props

All PlacesAutocompleteConfig fields, plus value/onValueChange (controlled input), onSelect, onError, placeholder, className. onSelect/onError are always safe as fresh inline functions; other config is read once at mount — remount via a key prop to change it.

Headless usage

usePlacesAutocomplete — the hook the component is built on (useSyncExternalStore under the hood) — is also exported, for custom markup.

License

MIT © Er. Anil Kumar Thakur