@baudevs/google-places-autocomplete

A React component library for integrating Google Places Autocomplete using the new Google Places Web Service API. This library simplifies fetching and displaying autocomplete suggestions while allowing you to handle place selection events easily.

Features

• Powered by the latest Google Places Web Service API.
• Lightweight and Fast: Built using Vite for modern development and efficient builds.
• Customizable: Provides an easy-to-use interface for fetching and displaying autocomplete suggestions.
• Debounced Input: Reduces API calls by debouncing user input.

Installation

To install the library, use your favorite package manager:

# Using pnpm
pnpm add @baudevs/google-places-autocomplete

# Using npm
npm install @baudevs/google-places-autocomplete

# Using yarn
yarn add @baudevs/google-places-autocomplete

Usage

Basic Example

Here's how you can use the PlaceAutocomplete component in your React application:

import React from 'react';
import { PlaceAutocomplete } from '@baudevs/google-places-autocomplete';

const App = () => {
  const handlePlaceSelect = (placeId: string) => {
    console.log('Selected Place ID:', placeId);
    // Fetch place details or perform additional actions with the placeId
  };

  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <h1>Google Places Autocomplete</h1>
      <PlaceAutocomplete
        apiKey="YOUR_GOOGLE_API_KEY"
        onPlaceSelect={handlePlaceSelect}
        placeholder="Search for a location"
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |-----------------|-----------------------------|-----------------------|--------------------------------------------------------------------------------------| | apiKey | string | Required | Your Google API key with the Places API enabled. | | onPlaceSelect | (placeId: string) => void | Required | Callback function triggered when a user selects a place. | | placeholder | string | 'Search for a place' | Placeholder text for the input field. |

Fetching Place Details

After a user selects a place, you can use the placeId to fetch additional details via the Google Places API:

const fetchPlaceDetails = async (placeId: string) => {
  const apiKey = 'YOUR_GOOGLE_API_KEY';

  try {
    const response = await fetch(
      `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&key=${apiKey}`
    );
    const data = await response.json();
    console.log('Place Details:', data.result);
  } catch (error) {
    console.error('Error fetching place details:', error);
  }
};

Development

To contribute or customize the library, follow these steps:

Prerequisites

• Node.js (>= 14.x)
• pnpm (preferred)

Clone the Repository

git clone https://github.com/your-org/baudevs-google-places-autocomplete.git
cd baudevs-google-places-autocomplete

Install Dependencies

pnpm install

Start Development

pnpm dev

Build the Library

pnpm build

Run Tests

pnpm test

Publishing to npm

Ensure you have configured your npm account and have access to the @baudevs scope. Then, run the following command to publish:

pnpm publish --access public

License

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

Contributing

We welcome contributions! Please open an issue or submit a pull request to help improve this library.

Support

If you encounter any issues or have questions, feel free to open an issue or contact us directly.

Acknowledgments

• Built using Vite for modern, blazing-fast development.
• Powered by the Google Places API.
• Special thanks to the open-source community for inspiration.