google-autocomplete-input

A React component for Google Places Autocomplete using the official PlaceAutocompleteElement.

✨ Features

• Lightweight and easy to use
• Integrates with Google Maps JavaScript API
• Supports custom regions and autocomplete filtering
• Built with React best practices and hooks

📦 Installation

npm install google-autocomplete-input

📥 Import

import { GoogleAutocompleteInput } from 'google-autocomplete-input';

🌐 Google Maps API Reference

You will need a Google Maps API key with Places API enabled.
Refer to the documentation:
https://developers.google.com/maps/documentation/javascript/place-search#maps_place_text_search-html

🧪 Example Usage

import React, { useState } from 'react';
import { GoogleAutocompleteInput } from 'google-autocomplete-input';

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

  return (
    <GoogleAutocompleteInput
      value={value}
      onChange={(val) => setValue(val)}
      placeholder="Enter address"
      googleMapApiKey="YOUR_API_KEY"
      searchingRegion={['in', 'us']}
    />
  );
}

export default App;

🔑 Props

| Prop | Type | Description | |-------------------|-------------------------|-----------------------------------------------------| | value | string | The current value of the input | | onChange | (val: string) => void | Callback function triggered when value changes | | placeholder | string | Placeholder text shown in the input | | googleMapApiKey | string | Your Google Maps API key | | searchingRegion | string[] | Region codes to prioritize (e.g., ['in', 'us']) |

🛠️ License

MIT