{"id":46228864,"url":"https://github.com/mlane/use-google-places-suggestions","last_synced_at":"2026-03-03T17:18:35.092Z","repository":{"id":324208563,"uuid":"1096026752","full_name":"mlane/use-google-places-suggestions","owner":"mlane","description":"A lightweight React hook for Google Places autocomplete using the modern AutocompleteSuggestion API.","archived":false,"fork":false,"pushed_at":"2026-02-06T18:52:50.000Z","size":205,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-02T07:51:32.788Z","etag":null,"topics":["address-autocomplete","autocomplete","autocomplete-suggestion","autocomplete-suggestions","geocoder","geocoding","google-maps","google-places","hook","location-search","places-api","react","react-hook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlane.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-13T20:57:40.000Z","updated_at":"2025-11-23T22:02:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mlane/use-google-places-suggestions","commit_stats":null,"previous_names":["mlane/use-google-places-suggestions"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mlane/use-google-places-suggestions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlane%2Fuse-google-places-suggestions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlane%2Fuse-google-places-suggestions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlane%2Fuse-google-places-suggestions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlane%2Fuse-google-places-suggestions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlane","download_url":"https://codeload.github.com/mlane/use-google-places-suggestions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlane%2Fuse-google-places-suggestions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30052343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T15:26:47.567Z","status":"ssl_error","status_checked_at":"2026-03-03T15:26:17.132Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["address-autocomplete","autocomplete","autocomplete-suggestion","autocomplete-suggestions","geocoder","geocoding","google-maps","google-places","hook","location-search","places-api","react","react-hook"],"created_at":"2026-03-03T17:18:34.008Z","updated_at":"2026-03-03T17:18:35.085Z","avatar_url":"https://github.com/mlane.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-google-places-suggestions\n\n[![version](https://img.shields.io/npm/v/use-google-places-suggestions?style=flat-square)](https://www.npmjs.com/package/use-google-places-suggestions)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-google-places-suggestions)](https://bundlephobia.com/package/use-google-places-suggestions)\n![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)\n\nA lightweight, zero-dependency React hook for Google Places Autocomplete using the modern [**AutocompleteSuggestion API**](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteSuggestion). It handles talking to Google, debouncing, and `sessionStorage` caching; your UI and state stay in your app. Inspired by [`use-places-autocomplete`](https://github.com/wellyshen/use-places-autocomplete), but deliberately UI-agnostic.\n\n```bash\nnpm install use-google-places-suggestions\n```\n\nYou are responsible for loading the Google Maps JavaScript API with Places and `AutocompleteSuggestion` before using this hook.\n\nAutomated tests are currently in progress and will be added in an upcoming release.\n\n## How it works\n\nYou pass a controlled `value` string into the hook (plus optional `cacheExpiration`, `cacheKey`, and `config`). The hook waits for `window.google.maps.places.AutocompleteSuggestion`, debounces calls to `fetchAutocompleteSuggestions`, caches results per lowercased query in `sessionStorage`, and returns `isLoading`, `onClear`, `onSelectPrediction`, and `predictions` for you to wire into your UI.\n\n`cacheKey`, `cacheExpiration`, and [config](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest) are expected to be stable per hook instance. If you need different settings (e.g. domestic vs international), use separate `useGooglePlacesSuggestions` instances rather than changing options dynamically.\n\n```tsx\nimport { useState } from 'react'\nimport {\n  getGooglePlacesGeocode,\n  getGooglePlacesGeocodeLatLng,\n  useGooglePlacesSuggestions,\n} from 'use-google-places-suggestions'\n\nexport const Geocoder = () =\u003e {\n  const [value, setValue] = useState('')\n  const { isLoading, onClear, onSelectPrediction, predictions } =\n    useGooglePlacesSuggestions({\n      value,\n      // cacheExpiration: 24 * 60 * 60, // optional (seconds, default 24h)\n      // cacheKey: 'ugps',              // optional\n      // config: { types: ['address'] } // optional AutocompleteRequest options\n    })\n\n  const onChange = (event: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n    const updatedValue = event.currentTarget.value\n    setValue(updatedValue)\n\n    if (!updatedValue.trim()) onClear()\n  }\n\n  const onClick = (\n    prediction: google.maps.places.AutocompleteSuggestion['placePrediction']\n  ) =\u003e {\n    onSelectPrediction(prediction)\n\n    if (!prediction?.text?.text) return\n\n    /**\n     * Gets the geocoder result from a Google Places geocoder request.\n     * @param request - The geocoder request.\n     * @returns The geocoder result.\n     * @see https://developers.google.com/maps/documentation/javascript/geocoding\n     */\n    getGooglePlacesGeocode({\n      address: prediction?.text?.text,\n    }).then(results =\u003e {\n      const first = results?.[0]\n\n      if (!first) return\n\n      /**\n       * Gets the latitude and longitude from a Google Places geocoder result.\n       * @param result - The geocoder result.\n       * @returns The latitude and longitude as a LatLngLiteral.\n       */\n      const latLng = getGooglePlacesGeocodeLatLng(first)\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        disabled={isLoading}\n        type='text'\n        value={value}\n        onChange={onChange}\n        placeholder={isLoading ? 'Loading Places…' : 'Search an address'}\n      /\u003e\n\n      {predictions?.map(prediction =\u003e (\n        \u003cbutton\n          key={prediction?.placeId}\n          type='button'\n          onClick={() =\u003e onClick(prediction)}\n        \u003e\n          {prediction?.text?.text}\n        \u003c/button\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\n## Contributors\n\nIssues and small, focused PRs are welcome, especially around the [AutocompleteSuggestion flow](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteSuggestion), caching, or geocoding helpers.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlane%2Fuse-google-places-suggestions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlane%2Fuse-google-places-suggestions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlane%2Fuse-google-places-suggestions/lists"}