Google Places Autocomplete for React

A lightweight and easy-to-use Google Places Autocomplete component for React applications. It allows users to search for locations and fetch place details using the Google Places API.

---

🚀 Features

• ✅ Google Places API Integration – Fetch place suggestions in real-time.
• ✅ Lightweight & Fast – Minimal dependencies and optimized performance.
• ✅ Customizable – Fully controllable via props.
• ✅ Easy to Integrate – Works out of the box with any React app.
• ✅ TypeScript Support – Includes TypeScript types for better development experience.

---

📦 Installation

Install the package using npm or yarn:

1npm install google-places-autocomplete-react

OR

1yarn add google-places-autocomplete-react

---

📖 How to Use

1️⃣ Basic Usage

1import React from "react";
2import GooglePlacesAutocomplete from "google-places-autocomplete-react";
3
4const App = () => {
5    const handlePlaceSelect = (place) => {
6        console.log("Selected Place:", place);
7    };
8
9    return (
10        <div style={{ maxWidth: "400px", margin: "50px auto" }}>
11            <GooglePlacesAutocomplete 
12                apiKey="YOUR_GOOGLE_API_KEY"
13                onPlaceSelect={handlePlaceSelect}
14            />
15        </div>
16    );
17};
18
19export default App;

2️⃣ Fetching Place Details

The onPlaceSelect callback receives an object containing:

• description - The name of the selected place.
• lat - Latitude of the location.
• lng - Longitude of the location.

Example:

1const handlePlaceSelect = (place) => {
2    console.log("Place Name:", place.description);
3    console.log("Latitude:", place.lat);
4    console.log("Longitude:", place.lng);
5};

3️⃣ Customizing Placeholder Text

1<GooglePlacesAutocomplete 
2    apiKey="YOUR_GOOGLE_API_KEY"
3    onPlaceSelect={handlePlaceSelect}
4    placeholder="Enter a city or address"
5/>

4️⃣ Styling the Input Field

This component allows full customization via props.

1<GooglePlacesAutocomplete
2    apiKey="YOUR_GOOGLE_API_KEY"
3    onPlaceSelect={handlePlaceSelect}
4    inputClassName="custom-input"
5    suggestionsClassName="custom-suggestions"
6    suggestionItemClassName="custom-suggestion-item"
7    inputStyle={{ padding: "10px", fontSize: "16px" }}
8    suggestionsStyle={{ backgroundColor: "white", borderRadius: "5px" }}
9    suggestionItemStyle={{ padding: "8px", cursor: "pointer" }}
10/>

---

⚙️ Props

Prop Name	Type	Required	Description
apiKey	string	✅ Yes	Your Google Maps API key.
onPlaceSelect	function	✅ Yes	Callback function triggered when a place is selected.
placeholder	string	❌ No	Placeholder text for the input field (default: "Search for a location").
inputClassName	string	❌ No	Custom class name for the input field.
suggestionsClassName	string	❌ No	Custom class name for the suggestions dropdown.
suggestionItemClassName	string	❌ No	Custom class name for each suggestion item.
inputStyle	object	❌ No	Inline styles for the input field.
suggestionsStyle	object	❌ No	Inline styles for the suggestions container.
suggestionItemStyle	object	❌ No	Inline styles for suggestion items.

---

🌎 Google API Setup

To use this package, you need a Google API key with the Places API enabled.

Steps to Get an API Key:

1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Enable the Places API under "APIs & Services".
4. Generate an API key under "Credentials".
5. Restrict the key for security (optional).
6. Use the key in the apiKey prop.

---

🛠 Troubleshooting

1️⃣ Autocomplete not working?

✅ Ensure:

• The Places API is enabled in your Google Cloud Console.
• The API key is correctly added.
• No CORS or billing issues exist in your Google account.

2️⃣ API limit exceeded?

✅ Check your Google Cloud billing settings. Google provides free tier limits for Places API usage.

3️⃣ Console errors related to Google Maps?

✅ Make sure:

• The script is loaded only once.
• The key is valid and has permissions.

---

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

🙌 Contributing

Contributions are welcome! If you’d like to improve this package:

1. Fork the repository.
2. Create a feature branch: git checkout -b feature-name.
3. Commit your changes: git commit -m "Added feature XYZ".
4. Push to the branch: git push origin feature-name.
5. Open a Pull Request.

---

💬 Support

If you encounter any issues or have suggestions, feel free to:

• Open an issue on GitHub
• Reach out via Twitter

Happy coding! 🚀