DEV Community

Cover image for React Google Places Autocomplete – Modern, TypeScript-Friendly Component
Iresh Madushanka
Iresh Madushanka

Posted on

React Google Places Autocomplete – Modern, TypeScript-Friendly Component

#react #javascript #typescript #webdev

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
Enter fullscreen mode Exit fullscreen mode

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)}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  )}
/>
Enter fullscreen mode Exit fullscreen mode

⚠️ 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

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

Links

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.

Top comments (0)