React Google Places Autocomplete – Modern, TypeScript-Friendly Component

Iresh Madushanka — Sun, 21 Dec 2025 14:31:35 +0000

React Google Places Autocomplete – Modern, TypeScript-Friendly Component

If you’ve ever built a React app that needs location inputs, you know how tricky Google Places Autocomplete can be:

Legacy libraries are often unmaintained.
Google recently introduced the AutocompleteSuggestion API, leaving many libraries behind.
Managing session tokens, debouncing, and error handling can get messy fast.

That’s why I created react-google-places-autocomplete-modern — a production-ready React component that handles everything cleanly.

Why This Component Exists

Supports the new AutocompleteSuggestion API (recommended by Google)
Automatically falls back to the legacy AutocompleteService if needed
Handles session tokens, debouncing, and errors automatically
Works with React + Next.js, TypeScript, and modern builds
Fully controlled component for forms

In short, it lets you focus on UX, not Google Maps quirks.

Features

Country & language restrictions
Debounced inputs to reduce API calls
Async script loading (v=weekly&loading=async)
Custom rendering of suggestions
Defensive error handling
TypeScript-ready
Tree-shakeable, minimal footprint

🛠 Installation

npm install react-google-places-autocomplete-modern

Peer dependencies: react and react-dom.

📦 Basic Usage

import { useState } from 'react';
import { LocationAutocomplete } from 'react-google-places-autocomplete-modern';

export function Example() {
  const [value, setValue] = useState('');

  return (
    <LocationAutocomplete
      value={value}
      onChange={setValue}
      onSelect={(place) => console.log(place)}
    />
  );
}

Advanced Usage

<LocationAutocomplete
  apiKey={process.env.NEXT_PUBLIC_MAPS_KEY}
  value={value}
  onChange={setValue}
  onSelect={(place) => console.log(place)}
  countries={['us']}
  language="en"
  debounceMs={250}
  minLength={2}
  autoClearSuggestions
  renderSuggestion={(s) => (
    <div>
      <strong>{s.structuredFormatting?.mainText ?? s.description}</strong>
      <small style={{ marginLeft: 6 }}>
        {s.structuredFormatting?.secondaryText}
      </small>
    </div>
  )}
/>

⚠️ Next.js note:
Use "use client" or dynamic import with ssr: false to ensure the component renders only in the browser.

🔒 Security & Performance

API keys are never embedded in the package
Debouncing + session tokens reduce quota usage
Cleans up timers and listeners on unmount
Compatible with modern React practices

Google Maps Setup

Enable Places API and Maps JavaScript API in Google Cloud
Use HTTP referrer-restricted keys
Ensure billing is enabled
Optional: manually load the script or let the component handle it

Why You’ll Love It

Saves you from messy Google Maps setup
Works reliably even with the new Google API
Fully typed and modern React friendly
Easy to customize and extend

If you’re building a React app with location search, this is the package I wish I had when I started.

💡 Pro tip:
Combine with your UI library (Tailwind, Material UI, or Chakra) for fully styled suggestions in minutes.

DEV Community: Iresh Madushanka

React Google Places Autocomplete – Modern, TypeScript-Friendly Component

React Google Places Autocomplete – Modern, TypeScript-Friendly Component

Why This Component Exists

Features

🛠 Installation

📦 Basic Usage

Advanced Usage

🔒 Security & Performance

Google Maps Setup

Links

Why You’ll Love It