{"library":"react-google-autocomplete","title":"React Google Autocomplete & Places Hooks","description":"The `react-google-autocomplete` package provides flexible tools for integrating Google Places Autocomplete functionality into React applications. It offers a high-level `Autocomplete` component for quick setup, and lower-level hooks (`usePlacesWidget`, `usePlacesAutocompleteService`) for more control over UI and API interactions. The `usePlacesWidget` hook allows attaching autocomplete behavior to any input element via a ref, while `usePlacesAutocompleteService` provides direct programmatic access to the Google Places Autocomplete Service, including debounce functionality to optimize API requests. The current stable version is 2.7.5, with an active release cadence involving frequent minor and patch updates. Key differentiators include the dual approach of providing both a ready-to-use component and advanced hooks, built-in debounce, and comprehensive TypeScript types.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-google-autocomplete"],"cli":null},"imports":["import Autocomplete from 'react-google-autocomplete';","import { usePlacesWidget } from 'react-google-autocomplete';","import { usePlacesAutocompleteService } from 'react-google-autocomplete';","import type { PlaceResult } from 'react-google-autocomplete';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Autocomplete from \"react-google-autocomplete\";\nimport React from 'react';\n\nfunction MyAutocompleteComponent() {\n  // Replace with your actual Google Maps API key or use environment variables\n  // Ensure GOOGLE_MAPS_API_KEY is defined in your environment or .env file\n  const YOUR_GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY ?? '';\n\n  if (!YOUR_GOOGLE_MAPS_API_KEY) {\n    console.error('GOOGLE_MAPS_API_KEY is not defined. Please provide your API key.');\n    return <div>API Key missing. Please set GOOGLE_MAPS_API_KEY.</div>;\n  }\n\n  return (\n    <div style={{ padding: '20px', maxWidth: '600px', margin: 'auto' }}>\n      <h1>Search for a Place</h1>\n      <p>Start typing an address or place name below:</p>\n      <Autocomplete\n        apiKey={YOUR_GOOGLE_MAPS_API_KEY}\n        onPlaceSelected={(place, inputRef, autocompleteRef) => {\n          console.log(\"Selected Place:\", place);\n          if (place.geometry && place.geometry.location) {\n            console.log(\"Latitude:\", place.geometry.location.lat());\n            console.log(\"Longitude:\", place.geometry.location.lng());\n          }\n          console.log(\"Full Address:\", place.formatted_address);\n        }}\n        options={{\n          types: [\"(cities)\"], // Example: restrict to cities\n          fields: [\"address_components\", \"geometry\", \"icon\", \"name\", \"place_id\", \"formatted_address\"]\n        }}\n        placeholder=\"Enter a city or location\"\n        style={{ \n          width: '100%', \n          padding: '10px',\n          fontSize: '16px',\n          border: '1px solid #ccc',\n          borderRadius: '4px'\n        }}\n        className=\"my-autocomplete-input\"\n      />\n      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#666' }}>\n        Ensure the Google Maps JavaScript API and Places API are enabled for your key.\n      </p>\n    </div>\n  );\n}\n\nexport default MyAutocompleteComponent;","lang":"javascript","description":"This quickstart demonstrates how to use the `Autocomplete` component with a Google Maps API key to integrate Google Places Autocomplete, logging selected place details to the console.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}