{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-places-autocomplete"],"cli":null},"imports":["import PlacesAutocomplete from 'react-places-autocomplete';","import { geocodeByAddress } from 'react-places-autocomplete';","import { getLatLng } from 'react-places-autocomplete';","import { geocodeByPlaceId } from 'react-places-autocomplete';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}