{"_id":"@atomap/use-places-autocomplete","_rev":"1-17c46ee5b209539d2e210b6ee00ac362","name":"@atomap/use-places-autocomplete","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@atomap/use-places-autocomplete","version":"1.0.4","description":"A react hook for getting predictions from the Google Places Autocomplete Service","main":"dist/use-places-autocomplete.js","scripts":{"start":"node dist/use-places-autocomplete.js","build":"rollup -c","dev":"rollup -c -w"},"peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@babel/core":"^7.12.3","@rollup/plugin-commonjs":"^16.0.0","@rollup/plugin-typescript":"^6.1.0","babel-loader":"^8.2.1","prettier":"^2.1.2","rollup":"^2.33.3","tslib":"^2.0.3","typescript":"^4.0.5","@types/googlemaps":"^3.40.3"},"keywords":["usePlacesAutocomplete","react","hooks","use-places-autocomplete","Google Places Autocomplete Service","Google Places Autocomplete Service react hook","Google autocomplete react hook"],"author":{"name":"Will Mayger"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/WillMayger/use-places-autocomplete.git"},"bugs":{"url":"https://github.com/WillMayger/use-places-autocomplete/issues"},"homepage":"https://github.com/WillMayger/use-places-autocomplete#readme","gitHead":"817a2f8576fadf7f75598cddf281cf4865973b43","_id":"@atomap/use-places-autocomplete@1.0.4","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-HmqxO52xrCEO8Vjd/gVOgOlzqkRYvYm2am4N4HbHVo4zJOQsNzlKCgSv5EpMhHPR3cn8RsDq2LI8tXCoDeZQvw==","shasum":"1a4e51b1bd8d8e69339e905a30df4f633d9af191","tarball":"https://registry.npmjs.org/@atomap/use-places-autocomplete/-/use-places-autocomplete-1.0.4.tgz","fileCount":3,"unpackedSize":21692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJft7pJCRA9TVsSAnZWagAASscQAJNXtvFs0N52j5cv1c6p\nyOWw7H61GKWa94H9Km1QNIVa2RHMgzNhAGLHXorAG9JIVZd15jAKNJ8N9Vg8\nyugEt3DeIYztcG52V0s1Ph25ZmFPtIxXL3E2UvdQo6HNlem+GwLVzamHDd20\nuWH65Qn0IgVTAYxUhE9Bh5J4ajD2JzWWK9FeLYeDKA7TuxhnVQLT8G8GDtRV\nW0/0nFik9/EuwJKwJS420SCPBwoSMl0kKIo4ltQHzqUqsdBnaAGM5JTssSjP\nJAw/2FmxaJzAEK2xRjvSsqKzt13nsm7G1TfLRCQPH6s1O5es+tqV1G2X2x4S\nQ9WmzyYm5f9Tym2+ou7SDebIEXE+FXs/RKLenCgKCIONDuPFQHJx3xncHWI5\n1ty3SHNyt8y6nO8FA8huo5JVY1l+nnNSQBvcDX0YCxWBNUuprGMXlJEW6HGi\nnuMk4GQdzXHsZ3GmB1ZqQuk8mLx2MQdAWwL7uOoM9CNMNlK8MRA+abGk6j9d\niGay2LLcNg0CQNeYWsFBuyE/Am7Y6c8iVtb5x0AIDLRU+zM9HVCCH5PrIXJF\nRlhhpv/oimnsRiZxxsUV8xr9AY/QaB9l1gti5KHE+z3SD3B3yeFH3JAajxYn\nADhxPI99bpvYy9Qvpe+yn6P5SsPQDH4LvVE5u0t3te9fuz6I264YDL8OXPSh\nsIv5\r\n=t5Fq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4DMUUDyLpkhYmNZQx8VFlFApuREBOwFaaNDhJuo3xQwIgA9rb8A4AtnqAXHRc1lGmSsPTIGsBIoDhlk97W/7rv8c="}]},"_npmUser":{"name":"reactdevuk","email":"will@mayger.dev"},"directories":{},"maintainers":[{"name":"reactdevuk","email":"will@mayger.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-places-autocomplete_1.0.4_1605876297334_0.8740036565054119"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-20T12:44:57.057Z","1.0.4":"2020-11-20T12:44:57.467Z","modified":"2022-04-04T16:14:33.188Z"},"maintainers":[{"name":"reactdevuk","email":"will@mayger.dev"}],"description":"A react hook for getting predictions from the Google Places Autocomplete Service","homepage":"https://github.com/WillMayger/use-places-autocomplete#readme","keywords":["usePlacesAutocomplete","react","hooks","use-places-autocomplete","Google Places Autocomplete Service","Google Places Autocomplete Service react hook","Google autocomplete react hook"],"repository":{"type":"git","url":"git+https://github.com/WillMayger/use-places-autocomplete.git"},"author":{"name":"Will Mayger"},"bugs":{"url":"https://github.com/WillMayger/use-places-autocomplete/issues"},"license":"ISC","readme":"# usePlacesAutocomplete React Hook for using the Google Places Autocomplete Service.\n\nThis hook lets you make use of the Google Places Autocomplete Service in the simplest way possible.\n\nYou enter text, you get predictions.\n\nThis hook uses debouncing which means that you can make sure that if a user is typing it does not spam the service and eat up resources which will save you money when using this service.\n\nI highly recommend that you read [this article about using the Google places autocomplete service with react and with hooks](https://atomizedobjects.com/blog/react/how-to-use-google-autocomplete-with-react-hooks/)\n\n## Requirements\n\n**You must have added the Google places script to your html head**\nAdd the below script to the `` of your page and add in your API key.\n\n```html\n\n```\n\n**If you use the Google Places Autocomplete Service you need to know and understand the requirements from Google:**\n\n1. You can use Place Autocomplete even without a map.\n2. If you do show a map, it must be a Google map.\n3. When you display predictions from the Place Autocomplete service without a map, you must include the ['Powered by Google' logo](https://developers.google.com/places/web-service/policies#logo_requirements).\n\n## Install\n\nYarn:\n`yarn add @atomap/use-places-autocomplete`\n\nNPM:\n`npm install --save @atomap/use-places-autocomplete`\n\n## Importing\n\n`import usePlacesAutocomplete from '@atomap/use-places-autocomplete'`\n\n## Usage\n\nAdd the following to the head of your html:\n\n```html\n\n```\n\nCreate a new component and paste the following code:\n\n```js\nimport React, { useState } from 'react'\nimport usePlacesAutocomplete from '@atomap/use-places-autocomplete'\n\nexport default function PredictionsOnInputChange() {\n const [selectedPrediction, setSelectedPrediction] = useState(null)\n const [searchValue, setSearchValue] = useState('')\n const { predictions, error } = usePlacesAutocomplete(searchValue)\n\n if (error) {\n console.error(error)\n }\n\n const handlePredictionSelection = (e, prediction) => {\n e.preventDefault()\n setSelectedPrediction(prediction)\n }\n\n return (\n <>\n
\n setSearchValue(e.target.value)}\n />\n \n
    \n {predictions?.map((prediction) => (\n
  • \n handlePredictionSelection(e, prediction)}\n onKeyDown={(e) => handlePredictionSelection(e, prediction)}\n >\n {prediction?.structured_formatting?.main_text || 'Not found'}\n \n
    • \n ))}\n
\n

You searched for: {searchValue}

\n

\n You selected:{' '}\n {selectedPrediction?.structured_formatting?.main_text || 'None'}\n

\n \n \n )\n}\n```\n\nExample with options:\n\n```js\nconst { predictions, error } = usePlacesAutocomplete(searchValue, {\n debounceTimeout: 400,\n componentRestrictions: { country: 'gb' },\n})\n```\n\n### Types & Arguments\n\n| Argument | TypeScript Type | JavaScript Type | Description |\n| ---------------------------------- | ---------------------------- | --------------- | -------------------------------------------------- |\n| userInput | string | string | A search query provided by a user. |\n| options (optional) | UsePlacesAutocompleteOptions | object | Options for the google places autocomplete service [full list available here](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest) |\n| options.debounceTimeout (optional) | number | number | Length of time to wait for the debounce |\n","readmeFilename":"README.md"}