{"id":11824,"library":"react-places-autocomplete","title":"React Places Autocomplete","description":"react-places-autocomplete is a React component designed to integrate Google Maps Places Autocomplete functionality into web applications, allowing users to easily select addresses. The current stable version is 7.3.0, released in January 2024. The library offers a highly customizable user interface, utility functions for geocoding addresses, and retrieving latitude and longitude coordinates using the Google Maps Geocoding API. Key differentiators include full control over rendering, mobile-friendly user experience, WAI-ARIA compliance, and support for asynchronous loading of the Google Maps JavaScript API. The project is actively seeking new maintainers, which may impact its long-term development cadence and responsiveness to new features or complex issues. Despite recent minor updates, significant feature development might be slow without additional community contributions.","status":"maintenance","version":"7.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/kenny-hibino/react-places-autocomplete","tags":["javascript","React.js","React","react-component","place","places","google-maps","google-map","places-autocomplete"],"install":[{"cmd":"npm install react-places-autocomplete","lang":"bash","label":"npm"},{"cmd":"yarn add react-places-autocomplete","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-places-autocomplete","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false}],"imports":[{"note":"This is the default export and main component.","wrong":"import { PlacesAutocomplete } from 'react-places-autocomplete';","symbol":"PlacesAutocomplete","correct":"import PlacesAutocomplete from 'react-places-autocomplete';"},{"note":"Utility function for geocoding an address, a named export.","wrong":"import geocodeByAddress from 'react-places-autocomplete';","symbol":"geocodeByAddress","correct":"import { geocodeByAddress } from 'react-places-autocomplete';"},{"note":"Utility function to extract latitude and longitude from geocoding results, a named export.","wrong":"const { getLatLng } = require('react-places-autocomplete');","symbol":"getLatLng","correct":"import { getLatLng } from 'react-places-autocomplete';"},{"note":"Utility function for geocoding by a Google Place ID, a named export.","wrong":"import * as RPP from 'react-places-autocomplete'; RPP.geocodeByPlaceId(...);","symbol":"geocodeByPlaceId","correct":"import { geocodeByPlaceId } from 'react-places-autocomplete';"}],"quickstart":{"code":"import React from 'react';\nimport PlacesAutocomplete, {\n  geocodeByAddress,\n  getLatLng,\n} from 'react-places-autocomplete';\n\n// Ensure you load Google Maps JavaScript API in your HTML:\n// <script src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\"></script>\n\nclass LocationSearchInput extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { address: '' };\n  }\n\n  handleChange = address => {\n    this.setState({ address });\n  };\n\n  handleSelect = address => {\n    geocodeByAddress(address)\n      .then(results => getLatLng(results[0]))\n      .then(latLng => console.log('Success', latLng))\n      .catch(error => console.error('Error during geocoding:', error));\n  };\n\n  render() {\n    return (\n      <PlacesAutocomplete\n        value={this.state.address}\n        onChange={this.handleChange}\n        onSelect={this.handleSelect}\n      >\n        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (\n          <div>\n            <input\n              {...getInputProps({\n                placeholder: 'Search Places ...',\n                className: 'location-search-input',\n              })}\n            />\n            <div className=\"autocomplete-dropdown-container\">\n              {loading && <div>Loading...</div>}\n              {suggestions.map(suggestion => {\n                const className = suggestion.active\n                  ? 'suggestion-item--active'\n                  : 'suggestion-item';\n                const style = suggestion.active\n                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }\n                  : { backgroundColor: '#ffffff', cursor: 'pointer' };\n                return (\n                  <div\n                    {...getSuggestionItemProps(suggestion, { className, style })}\n                    key={suggestion.placeId} // Key is important for React lists\n                  >\n                    <span>{suggestion.description}</span>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        )}\n      </PlacesAutocomplete>\n    );\n  }\n}\n\nexport default LocationSearchInput;\n","lang":"javascript","description":"This quickstart demonstrates a basic React class component that integrates `react-places-autocomplete`. It shows how to initialize the component, handle input changes, and process selected addresses to retrieve their latitude and longitude using the provided utility functions. It assumes the Google Maps JavaScript API is loaded externally."},"warnings":[{"fix":"Add `<script src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\"></script>` to your `index.html` or equivalent entry point, replacing `YOUR_API_KEY` with your actual Google API key.","message":"The Google Maps JavaScript API, including the 'places' library, must be loaded globally via a `<script>` tag in your HTML file before your React application initializes. This library does not automatically load the Google Maps script.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Be aware that long-term support and rapid evolution of the library may depend on community contributions. Consider contributing if you rely heavily on this library.","message":"The project is explicitly seeking new maintainers. While there have been recent releases, this indicates a potential for slower development, bug fixes, or new feature additions in the future if new maintainers are not found.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Obtain an API key from Google Cloud Console, enable 'Places API' and 'Maps JavaScript API', and include it in your script tag: `key=YOUR_API_KEY`.","message":"A valid Google Maps API Key is required for the Places API to function correctly. Ensure your API key is properly configured in the script URL and that the Places API is enabled for your Google Cloud project.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the Google Maps JavaScript API script is loaded synchronously in the `<head>` of your HTML with `defer` or `async` removed for initial load, or ensure it completes loading before your component mounts, as shown in the quickstart.","cause":"The Google Maps JavaScript API script has not been loaded, or it loaded after your React component tried to access `window.google`.","error":"ReferenceError: Google is not defined"},{"fix":"Add `&libraries=places` to your Google Maps script URL: `<script src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\"></script>`.","cause":"The 'places' library was not included in the Google Maps JavaScript API script URL.","error":"You must enable the 'places' library. Please see the Google Maps JavaScript API documentation."},{"fix":"Verify your Google Cloud project's API key restrictions, ensure 'Places API' and 'Maps JavaScript API' are enabled, and check your billing account status.","cause":"Your Google Maps API key is restricted, or the Places API is not enabled for your project, or there are billing issues.","error":"ApiTargetBlockedMapError (often seen in console or Network tab)"}],"ecosystem":"npm"}