{"_id":"@becomedev/react-places-autocomplete","_rev":"2-2f53e24b87bc69f47bad33e2b68cdb7a","name":"@becomedev/react-places-autocomplete","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@becomedev/react-places-autocomplete","version":"1.0.0","description":"A React component for Google Maps Places Autocomplete","main":"dist/index.js","scripts":{"commit":"git-cz","test":"jest","test:update":"jest --updateSnapshot","test:watch":"jest --watch","test:coverage":"jest --coverage","prebuild":"rimraf dist","build":"npm-run-all --parallel build:*","build:main":"babel --copy-files --out-dir dist --ignore *.spec.js src","build:umd":"webpack --output-filename index.umd.js","build:umd.min":"webpack --output-filename index.umd.min.js -p","semantic-release":"semantic-release pre && npm publish && semantic-release post","demo":"webpack-dev-server --config demo/webpack.config.js --debug --content-base demo --inline --hot --colors","demo:test":"mocha demo/tests/index.spec.js --compilers js:babel-register","demo:build":"rimraf demo/dist && webpack --config demo/webpack.config.js -p","demo:deploy":"gh-pages -d demo/dist","prepublish":"npm run build","postpublish":"npm run demo:deploy","prettier":"prettier --write \"src/**/*.js\" \"demo/**/*.js\"","lint":"eslint .","lint:fix":"eslint . --fix","format-code":"npm run prettier & npm run lint:fix","eslint-check":"eslint --print-config .eslintrc.js | eslint-config-prettier-check"},"repository":{"type":"git","url":"git+https://github.com/hkdahal/react-places-autocomplete.git"},"keywords":["React.js","React","react-component","place","places","google-maps","google-map","places-autocomplete","autocomplete","google","maps","latitude","longitude","geocode","geocoder"],"author":{"name":"Ken Hibino","email":"ken.hibino7@gmail.com","url":"http://www.kenhibino.com/"},"license":"MIT","bugs":{"url":"https://github.com/kenny-hibino/react-places-autocomplete/issues"},"homepage":"https://github.com/kenny-hibino/react-places-autocomplete#readme","devDependencies":{"babel-cli":"^6.23.0","babel-eslint":"8.2.2","babel-jest":"22.4.3","babel-loader":"^6.3.2","babel-plugin-react-transform":"^2.0.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-react-remove-prop-types":"^0.3.2","babel-preset-env":"1.6.1","babel-preset-react":"^6.23.1","babel-preset-stage-0":"^6.22.0","babel-register":"6.26.0","commitizen":"2.8.2","copy-webpack-plugin":"^4.0.1","cz-conventional-changelog":"1.1.6","enzyme":"3.3.0","enzyme-adapter-react-16":"1.1.1","enzyme-to-json":"3.3.3","eslint":"4.18.2","eslint-config-prettier":"2.9.0","eslint-plugin-prettier":"2.6.0","eslint-plugin-react":"7.7.0","file-loader":"0.11.2","gh-pages":"^0.12.0","ghooks":"1.3.2","image-webpack-loader":"3.3.1","jest":"22.4.3","json-loader":"0.5.4","npm-run-all":"2.3.0","prettier":"1.10.2","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"16.2.0","rimraf":"2.5.3","semantic-release":"^4.3.5","webpack":"^1.14.0","webpack-dev-server":"^1.16.2"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"},"ghooks":{"pre-commit":"npm run test"}},"babel":{"presets":["es2015","react","stage-2"]},"dependencies":{"lodash.debounce":"^4.0.8","prop-types":"^15.5.8"},"peerDependencies":{"react":">=0.14.7"},"jest":{"setupFiles":["./src/tests/helpers/jestSetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"collectCoverageFrom":["src/*.js"]},"gitHead":"cc5aacb0683e786a70448e72277f55655a419919","_id":"@becomedev/react-places-autocomplete@1.0.0","_nodeVersion":"12.10.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-CBPlRqKAVJED8+kK9SfgVl3YqzS2CIk40fbeFjkZZCIHsjSO3mTCFaP6lqM4Mjf1Jc/n35AxwE4yWfXMPcB3rQ==","shasum":"70ca022bf2f68b8ba685e5a430971698d9eb63ee","tarball":"https://registry.npmjs.org/@becomedev/react-places-autocomplete/-/react-places-autocomplete-1.0.0.tgz","fileCount":26,"unpackedSize":729906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6oMiCRA9TVsSAnZWagAAexoP/34v1ceL6tUz4AC/I2Dm\nFsCd35gyDyOHc+uvT7BvcIpB9NkUxf4hVYE4v0/nOO5leEa4UNkv+/jrQhP1\ndEGQkEQm8facJEBVrGm+Nqh9bFhqylERN79snz2lsbM9+hQiDiTCaob9ipEV\nZaqW6uYu/xVGIp7lt5jz8pcYCaV8+pH/rybN/kjUKdw035n0WtPOme1VchOD\nvOoXSsoA1hwMkkM6lEcx62vHzJ72dgelqlikktaBm4nEW6ZSVQRgY/C9knxH\nqjNxqmw6rSK8blecbkdYU65SsXi5ASgHgYC7BXhjzKEya6E3jRTkuKfJPFy7\n8XkVaxkvSwLFfNA5o5p8HkU7rBl6cIB3gQZ/O9KQnBs4HHdpBN6EU5XySSUg\nlChfiEqn9U57Kb9982AuN6xkKM9mLwGZZQ55ft/RhwQmlVlziKYyPGjdZ1cr\ngzen1pmx8WJyH70LUraRyUx4wj4BUPg7uFlyJ1Dk/8N4A+KcEXzSP4gPt8Nq\nDZ/EhcTVoYjkBfb3YTeS/X5WUBv+OB+0tvw736sUWdir8iRCl/ty37JS2ztu\nQM/4+Du/0duig3qkvrOvz22dd+sLhfChH0k5aorBW0eTS+07NVhA4UyUWXtH\nrgWTuqCtvlFZM+WcayMadtf8q43TV3g8zU1Ge6tT71nGBG9GTDqTh5ycmNKY\nhwE3\r\n=xOnj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQ5j6hxFvARhrpuezKc0dxShVbsI2jDlseWJI30cTRRAiEA3rrpt5EZE1sFXJgZvuQD1YO8RdV4DdhLiUqieeB5be8="}]},"maintainers":[{"name":"developer_who","email":"hxd1478@gmail.com"}],"_npmUser":{"name":"developer_who","email":"hxd1478@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-places-autocomplete_1.0.0_1575650082068_0.18453571485376963"},"_hasShrinkwrap":false},"1.0.1":{"name":"@becomedev/react-places-autocomplete","version":"1.0.1","description":"A React component for Google Maps Places Autocomplete","main":"dist/index.js","scripts":{"commit":"git-cz","test":"jest","test:update":"jest --updateSnapshot","test:watch":"jest --watch","test:coverage":"jest --coverage","prebuild":"rimraf dist","build":"npm-run-all --parallel build:*","build:main":"babel --copy-files --out-dir dist --ignore *.spec.js src","build:umd":"webpack --output-filename index.umd.js","build:umd.min":"webpack --output-filename index.umd.min.js -p","semantic-release":"semantic-release pre && npm publish && semantic-release post","demo":"webpack-dev-server --config demo/webpack.config.js --debug --content-base demo --inline --hot --colors","demo:test":"mocha demo/tests/index.spec.js --compilers js:babel-register","demo:build":"rimraf demo/dist && webpack --config demo/webpack.config.js -p","demo:deploy":"gh-pages -d demo/dist","prepublish":"npm run build","postpublish":"npm run demo:deploy","prettier":"prettier --write \"src/**/*.js\" \"demo/**/*.js\"","lint":"eslint .","lint:fix":"eslint . --fix","format-code":"npm run prettier & npm run lint:fix","eslint-check":"eslint --print-config .eslintrc.js | eslint-config-prettier-check"},"repository":{"type":"git","url":"git+https://github.com/hkdahal/react-places-autocomplete.git"},"keywords":["React.js","React","react-component","place","places","google-maps","google-map","places-autocomplete","autocomplete","google","maps","latitude","longitude","geocode","geocoder"],"author":{"name":"Ken Hibino","email":"ken.hibino7@gmail.com","url":"http://www.kenhibino.com/"},"license":"MIT","bugs":{"url":"https://github.com/kenny-hibino/react-places-autocomplete/issues"},"homepage":"https://github.com/kenny-hibino/react-places-autocomplete#readme","devDependencies":{"babel-cli":"^6.23.0","babel-eslint":"8.2.2","babel-jest":"22.4.3","babel-loader":"^6.3.2","babel-plugin-react-transform":"^2.0.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-react-remove-prop-types":"^0.3.2","babel-preset-env":"1.6.1","babel-preset-react":"^6.23.1","babel-preset-stage-0":"^6.22.0","babel-register":"6.26.0","commitizen":"2.8.2","copy-webpack-plugin":"^4.0.1","cz-conventional-changelog":"1.1.6","enzyme":"3.3.0","enzyme-adapter-react-16":"1.1.1","enzyme-to-json":"3.3.3","eslint":"4.18.2","eslint-config-prettier":"2.9.0","eslint-plugin-prettier":"2.6.0","eslint-plugin-react":"7.7.0","file-loader":"0.11.2","gh-pages":"^0.12.0","ghooks":"1.3.2","image-webpack-loader":"3.3.1","jest":"22.4.3","json-loader":"0.5.4","npm-run-all":"2.3.0","prettier":"1.10.2","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"16.2.0","rimraf":"2.5.3","semantic-release":"^4.3.5","webpack":"^1.14.0","webpack-dev-server":"^1.16.2"},"config":{"commitizen":{"path":"node_modules/cz-conventional-changelog"},"ghooks":{"pre-commit":"npm run test"}},"babel":{"presets":["es2015","react","stage-2"]},"dependencies":{"lodash.debounce":"^4.0.8","prop-types":"^15.5.8"},"peerDependencies":{"react":">=0.14.7"},"jest":{"setupFiles":["./src/tests/helpers/jestSetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"collectCoverageFrom":["src/*.js"]},"gitHead":"70fb6d688c976fcd3502d8b8d8c6426d45f6b112","_id":"@becomedev/react-places-autocomplete@1.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-smNqMWmZW6/6aMdcT7zsVdYYqzOzgvbq5UjaG89X/Tv2WtU/dJhi8DXuY359X8O3f1yrm91fu1em17TfcDGH8g==","shasum":"e08cd6c216e192c4089db68bf262aee01a31a47e","tarball":"https://registry.npmjs.org/@becomedev/react-places-autocomplete/-/react-places-autocomplete-1.0.1.tgz","fileCount":26,"unpackedSize":729678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6pTSCRA9TVsSAnZWagAAShoP/1lkwI56v+Ifh4NBDpOt\nO14PZi7S6flw6Mp9lRIV8u/g/i0ZNfRQhgpNP3qPDJ/x0ddeiK/Zw82BwReg\nIXaS9dCtcou8vNXFeWDys9F4j626cHYY1JGdUcWwQAvYkuXsBCM5SvLGSecZ\nr2lSlOnXIGH3CslqXfhVsxCoON9zzB1lZgJ38Mfev9Mmu2NP3YKMGWx8AXEQ\ncn1Tdy1WNVLUDnjQoPJ1XR6YoY3Gi/+7DxwIufr7I7LvEMae/UYUJt9FD8cx\n04HWVEpwTb/8n+wseYA1O6hTIjByKiNeGtwgp/2nhJRCUmPNSE83AeH1yJdG\nlkUPtw+1Y+/6Q57MxVmgFbzMcKWSEIufGsx2j3qcJzk//xwWbwUcCKNWE8ZJ\nYzGuHzgWhAE+uZdXyYBZgrBmuXK22L1U+9j0S1yRMA2xTAGnATLdgrbgsrup\nYvBCW2p7ZLVrp+hB97I20RAyOwl0W9KrzbU36qtHlbUs9cqsXiIT31uVnES9\n+ABveaUJhuzdNp1pJxZiAvrI22KHobxsvALR+hm1yXWHH9HPcU6R28WODXA5\nrjtzeXnyD/QttVjid+r8WZus/TVgej173JLoq8ckiGgMQ8fN4qE7C0mx5ZCE\n2jBfT7O9evXjM3xcfm/dEDfh9pK0Q3wXVHEsufnnx5ZomJlC38UpBVlJi8Rg\neweo\r\n=U5mj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4p4xv5mK0ZfCR47ysWbj8tq3p0oRTU5lLUK7Cv4UCZAiEA6hKHpSACc1g3lmmG/hnF9UhjGyFiaOVwZKs4nDnn3t4="}]},"maintainers":[{"name":"developer_who","email":"hxd1478@gmail.com"}],"_npmUser":{"name":"developer_who","email":"hxd1478@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-places-autocomplete_1.0.1_1575654610253_0.8969713227959932"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-06T16:34:41.845Z","1.0.0":"2019-12-06T16:34:42.240Z","modified":"2022-04-04T18:08:07.022Z","1.0.1":"2019-12-06T17:50:10.434Z"},"maintainers":[{"name":"developer_who","email":"hxd1478@gmail.com"}],"description":"A React component for Google Maps Places Autocomplete","homepage":"https://github.com/kenny-hibino/react-places-autocomplete#readme","keywords":["React.js","React","react-component","place","places","google-maps","google-map","places-autocomplete","autocomplete","google","maps","latitude","longitude","geocode","geocoder"],"repository":{"type":"git","url":"git+https://github.com/hkdahal/react-places-autocomplete.git"},"author":{"name":"Ken Hibino","email":"ken.hibino7@gmail.com","url":"http://www.kenhibino.com/"},"bugs":{"url":"https://github.com/kenny-hibino/react-places-autocomplete/issues"},"license":"MIT","readme":"[![travis build](https://img.shields.io/travis/kenny-hibino/react-places-autocomplete.svg?style=flat-square)](https://travis-ci.org/kenny-hibino/react-places-autocomplete)\r\n[![MIT-License](https://img.shields.io/npm/l/react-places-autocomplete.svg?style=flat-square)]()\r\n[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?style=flat-square)](https://gitter.im/react-places-autocomplete/Lobby)\r\n\r\n# React Places Autocomplete\r\n\r\nA React component to build a customized UI for Google Maps Places Autocomplete\r\n\r\nA Fork of `react-place-autocomplete`\r\n\r\n### Demo\r\n\r\nLive demo: [hibiken.github.io/react-places-autocomplete/](https://hibiken.github.io/react-places-autocomplete/)\r\n\r\n### Features\r\n\r\n1. Enable you to easily build a customized autocomplete dropdown powered by [Google Maps Places Library](https://developers.google.com/maps/documentation/javascript/places)\r\n2. [Utility functions](#utility-functions) to geocode and get latitude and longitude using [Google Maps Geocoder API](https://developers.google.com/maps/documentation/javascript/geocoding)\r\n3. Full control over rendering to integrate well with other libraries (e.g. Redux-Form)\r\n4. Mobile friendly UX\r\n5. WAI-ARIA compliant\r\n6. Support Asynchronous Google script loading\r\n\r\n### Installation\r\n\r\nTo install the stable version\r\n\r\n```sh\r\nnpm install --save react-places-autocomplete\r\n```\r\n\r\nReact component is exported as a default export\r\n\r\n```js\r\nimport PlacesAutocomplete from 'react-places-autocomplete';\r\n```\r\n\r\nutility functions are named exports\r\n\r\n```js\r\nimport {\r\n  geocodeByAddress,\r\n  geocodeByPlaceId,\r\n  getLatLng,\r\n} from 'react-places-autocomplete';\r\n```\r\n\r\n### Getting Started\r\n\r\n<a name=\"load-google-library\"></a>\r\nTo use this component, you are going to need to load [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/)\r\n\r\nLoad the library in your project\r\n\r\n```html\r\n<script src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places\"></script>\r\n```\r\n\r\nCreate your component\r\n\r\n```js\r\nimport React from 'react';\r\nimport PlacesAutocomplete, {\r\n  geocodeByAddress,\r\n  getLatLng,\r\n} from 'react-places-autocomplete';\r\n\r\nclass LocationSearchInput extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = { address: '' };\r\n  }\r\n\r\n  handleChange = address => {\r\n    this.setState({ address });\r\n  };\r\n\r\n  handleSelect = address => {\r\n    geocodeByAddress(address)\r\n      .then(results => getLatLng(results[0]))\r\n      .then(latLng => console.log('Success', latLng))\r\n      .catch(error => console.error('Error', error));\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <PlacesAutocomplete\r\n        value={this.state.address}\r\n        onChange={this.handleChange}\r\n        onSelect={this.handleSelect}\r\n      >\r\n        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (\r\n          <div>\r\n            <input\r\n              {...getInputProps({\r\n                placeholder: 'Search Places ...',\r\n                className: 'location-search-input',\r\n              })}\r\n            />\r\n            <div className=\"autocomplete-dropdown-container\">\r\n              {loading && <div>Loading...</div>}\r\n              {suggestions.map(suggestion => {\r\n                const className = suggestion.active\r\n                  ? 'suggestion-item--active'\r\n                  : 'suggestion-item';\r\n                // inline style for demonstration purpose\r\n                const style = suggestion.active\r\n                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }\r\n                  : { backgroundColor: '#ffffff', cursor: 'pointer' };\r\n                return (\r\n                  <div\r\n                    {...getSuggestionItemProps(suggestion, {\r\n                      className,\r\n                      style,\r\n                    })}\r\n                  >\r\n                    <span>{suggestion.description}</span>\r\n                  </div>\r\n                );\r\n              })}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </PlacesAutocomplete>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n## Props\r\n\r\nPlacesAutocomplete is a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components) with a [Render Prop](https://reactjs.org/docs/render-props.html). Therefore, you MUST pass at least `value` and `onChange` callback to the input element, and render function via `children`.\r\n\r\n| Prop                                                    |   Type   |      Required      | Description                                                                                      |\r\n| ------------------------------------------------------- | :------: | :----------------: | ------------------------------------------------------------------------------------------------ |\r\n| [`value`](#value)                                       |  string  | :white_check_mark: | `value` for the input element                                                                    |\r\n| [`onChange`](#onChange)                                 | function | :white_check_mark: | `onChange` function for the input element                                                        |\r\n| [`children`](#children)                                 | function | :white_check_mark: | Render function to specify the rendering                                                         |\r\n| [`onSelect`](#onSelect)                                 | function |                    | Event handler to handle user's select event                                                      |\r\n| [`onError`](#onError)                                   | function |                    | Error handler function that gets called when Google Maps API responds with an error              |\r\n| [`searchOptions`](#searchOptions)                       |  object  |                    | Options to Google Maps API (i.e. bounds, radius)                                                 |\r\n| [`debounce`](#debounce)                                 |  number  |                    | Number of milliseconds to delay before making a call to Google Maps API                          |\r\n| [`highlightFirstSuggestion`](#highlightFirstSuggestion) | boolean  |                    | If set to `true`, first list item in the dropdown will be automatically highlighted              |\r\n| [`shouldFetchSuggestions`](#shouldFetchSuggestions)     | boolean  |                    | Component will hit Google Maps API only if this flag is set `true`                               |\r\n| [`googleCallbackName`](#googleCallbackName)             |  string  |                    | You can provide a callback name to initialize `PlacesAutocomplete` after google script is loaded |\r\n\r\n<a name=\"value\"></a>\r\n\r\n### value\r\n\r\nType: `string`,\r\nRequired: `true`\r\n\r\n<a name=\"onChange\"></a>\r\n\r\n### onChange\r\n\r\nType: `function`,\r\nRequired: `true`\r\n\r\nTypically this event handler will update `value` state.\r\n\r\n```js\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={value => this.setState({ value })}\r\n>\r\n  {/* custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n<a name=\"children\"></a>\r\n\r\n### children\r\n\r\nType: `function`\r\nRequired: `true`\r\n\r\nThis is where you render whatever you want to based on the state of `PlacesAutocomplete`.\r\nThe function will take an object with the following keys.\r\n\r\n* `getInputProps` : function\r\n* `getSuggestionItemProps` : function\r\n* `loading` : boolean\r\n* `suggestions` : array\r\n\r\nSimple example\r\n\r\n```js\r\nconst renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions }) => (\r\n  <div className=\"autocomplete-root\">\r\n    <input {...getInputProps()} />\r\n    <div className=\"autocomplete-dropdown-container\">\r\n      {loading && <div>Loading...</div>}\r\n      {suggestions.map(suggestion => (\r\n        <div {...getSuggestionItemProps(suggestion)}>\r\n          <span>{suggestion.description}</span>\r\n        </div>\r\n      ))}\r\n    </div>\r\n  </div>\r\n);\r\n\r\n// In render function\r\n<PlacesAutocomplete value={this.state.value} onChange={this.handleChange}>\r\n  {renderFunc}\r\n</PlacesAutocomplete>;\r\n```\r\n\r\n#### getInputProps\r\n\r\nThis function will return the props that you can spread over the `<input />` element.\r\nYou can optionally call the function with an object to pass other props to the input.\r\n\r\n```js\r\n// In render function\r\n<input {...getInputProps({ className: 'my-input', autoFocus: true })} />\r\n```\r\n\r\n#### getSuggestionItemProps\r\n\r\nThis function will return the props that you can spread over each suggestion item in your\r\nautocomplete dropdown. You MUST call it with `suggestion` object as an argument, and optionally pass an object to pass other props to the element.\r\n\r\n```js\r\n// Simple example\r\n<div className=\"autocomplete-dropdown\">\r\n  {suggestions.map(suggestion => (\r\n    <div {...getSuggestionItemProps(suggestion)}>\r\n      {suggestion.description}\r\n    </div>\r\n  ))}\r\n</div>\r\n\r\n// Pass options as a second argument\r\n<div className=\"autocomplete-dropdown\">\r\n  {suggestions.map(suggestion => {\r\n    const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';\r\n    return (\r\n      <div {...getSuggestionItemProps(suggestion, { className })}>\r\n        {suggestion.description}\r\n      </div>\r\n    );\r\n  })}\r\n</div>\r\n```\r\n\r\n#### loading\r\n\r\nThis is a boolean flag indicating whether or not the request is pending, or has completed.\r\n\r\n#### suggestions\r\n\r\nThis is an array of suggestion objects each containing all the data from Google Maps API and other metadata.\r\n\r\nAn example of a suggestion object.\r\n\r\n```js\r\n{\r\n  active: false,\r\n  description: \"San Francisco, CA, USA\",\r\n  formattedSuggestion: { mainText: \"San Francisco\", secondaryText: \"CA, USA\" },\r\n  id: \"1b9ea3c094d3ac23c9a3afa8cd4d8a41f05de50a\",\r\n  index: 0,\r\n  matchedSubstrings: [ {length: 8, offset: 0} ],\r\n  placeId: \"ChIJIQBpAG2ahYAR_6128GcTUEo\",\r\n  terms: [\r\n    { offset: 0, value: \"San Francisco\" },\r\n    { offset: 15, value: \"CA\" },\r\n    { offset: 19, value: \"USA\" }\r\n  ],\r\n  types: [\"locality\", \"political\", \"geocode\"]\r\n}\r\n```\r\n\r\n<a name=\"onSelect\"></a>\r\n\r\n### onSelect\r\n\r\nType: `function`\r\nRequired: `false`,\r\nDefault: `null`\r\n\r\nYou can pass a function that gets called instead of `onChange` function when user\r\nhits the Enter key or clicks on a suggestion item.\r\n\r\nThe function takes two positional arguments. First argument is `address`, second is `placeId`.\r\n\r\n```js\r\n// NOTE: `placeId` is null when user hits Enter key with no suggestion item selected.\r\nconst handleSelect = (address: string, placeId: ?string) => {\r\n  // Do something with address and placeId\r\n}\r\n\r\n// Pass this function via onSelect prop.\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  onSelect={this.handleSelect}\r\n>\r\n  {/* Custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n<a name=\"onError\"></a>\r\n\r\n### onError\r\n\r\nType: `function`\r\nRequired: `false`\r\n\r\nYou can pass `onError` prop to customize the behavior when [google.maps.places.PlacesServiceStatus](https://developers.google.com/maps/documentation/javascript/places#place_details_responses) is not `OK` (e.g., no predictions are found)\r\n\r\nFunction takes `status` (string) and `clearSuggestions` (function) as parameters\r\n\r\n```js\r\n// Log error status and clear dropdown when Google Maps API returns an error.\r\nconst onError = (status, clearSuggestions) => {\r\n  console.log('Google Maps API returned error with status: ', status)\r\n  clearSuggestions()\r\n}\r\n\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  onError={onError}\r\n>\r\n  {/* Custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n<a name=\"searchOptions\"></a>\r\n\r\n### searchOptions\r\n\r\nType: `Object`\r\nRequired: `false`\r\nDefault: `{}`\r\n\r\nYou can fine-tune the settings passed to the AutocompleteService class with `searchOptions` prop.\r\nThis prop accepts an object following the same format as [google.maps.places.AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference#AutocompletionRequest)\r\n(except for `input`, which comes from the value of the input field).\r\n\r\n```js\r\n// these options will bias the autocomplete predictions toward Sydney, Australia with a radius of 2000 meters,\r\n// and limit the results to addresses only\r\nconst searchOptions = {\r\n  location: new google.maps.LatLng(-34, 151),\r\n  radius: 2000,\r\n  types: ['address']\r\n}\r\n\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  searchOptions={searchOptions}\r\n>\r\n  {/* Custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n<a name=\"debounce\"></a>\r\n\r\n### debounce\r\n\r\nType: `number`\r\nRequired: `false`\r\nDefault: `200`\r\n\r\nThe number of milliseconds to delay before making a call to Google Maps API.\r\n\r\n<a name=\"highlightFirstSuggestion\"></a>\r\n\r\n### highlightFirstSuggestion\r\n\r\nType: `boolean`\r\nRequired: `false`\r\nDefault: `false`\r\n\r\nIf set to `true`, first suggestion in the dropdown will be automatically set to be active.\r\n\r\n<a name=\"shouldFetchSuggestions\"></a>\r\n\r\n### shouldFetchSuggestions\r\n\r\nType: `boolean`\r\nRequired: `false`\r\nDefault: `true`\r\n\r\n```js\r\n// Only fetch suggestions when the input text is longer than 3 characters.\r\n<PlacesAutocomplete\r\n  value={this.state.address}\r\n  onChange={this.handleChange}\r\n  shouldFetchSuggestions={this.state.address.length > 3}\r\n>\r\n  {/* custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n<a name=\"googleCallbackName\"></a>\r\n\r\n### googleCallbackName\r\n\r\nType: `string`\r\nRequired: `false`\r\nDefault: `undefined`\r\n\r\nIf provided, component will initialize after the browser has finished downloading google script.\r\n\r\n**IMPORTANT**: To enable this async mode, you need to provide the same callback name to google script via `callback=[YOUR CALLBACK NAME]`.\r\n\r\nExample:\r\n\r\n```html\r\n<script async defer src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myCallbackFunc\"></script>\r\n```\r\n\r\nThen, provide `googleCallbackName` prop to `PlacesAutocomplete`.\r\n\r\n```js\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  googleCallbackName=\"myCallbackFunc\"\r\n>\r\n  {/* custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n**NOTE**: If there are more than one `PlacesAutocomplete` components rendered in the page,\r\nset up a callback function that calls a callback function for each component.\r\n\r\nExample:\r\n\r\n```html\r\n<script>\r\nwindow.myCallbackFunc = function() {\r\n  window.initOne && window.initOne();\r\n  window.initTwo && window.initTwo();\r\n}\r\n</script>\r\n<script async defer\r\nsrc=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=myCallbackFunc\"></script>\r\n```\r\n\r\n```js\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  googleCallbackName=\"initOne\"\r\n>\r\n  {/* custom render function */}\r\n</PlacesAutocomplete>\r\n\r\n<PlacesAutocomplete\r\n  value={this.state.value}\r\n  onChange={this.handleChange}\r\n  googleCallbackName=\"initTwo\"\r\n>\r\n  {/* custom render function */}\r\n</PlacesAutocomplete>\r\n```\r\n\r\n<a name=\"utility-functions\"></a>\r\n\r\n## Utility Functions\r\n\r\n* [`geocodeByAddress`](#geocode-by-address)\r\n* [`geocodeByPlaceId`](#geocode-by-place-id)\r\n* [`getLatLng`](#get-lat-lng)\r\n\r\n<a name=\"geocode-by-address\"></a>\r\n\r\n### `geocodeByAddress` API\r\n\r\n```js\r\n/**\r\n * Returns a promise\r\n * @param {String} address\r\n * @return {Promise}\r\n */\r\ngeocodeByAddress(address);\r\n```\r\n\r\n#### address\r\n\r\nType: `String`,\r\nRequired: `true`\r\n\r\nString that gets passed to Google Maps [Geocoder](https://developers.google.com/maps/documentation/javascript/geocoding)\r\n\r\n```js\r\nimport { geocodeByAddress } from 'react-places-autocomplete';\r\n\r\n// `results` is an entire payload from Google API.\r\ngeocodeByAddress('Los Angeles, CA')\r\n  .then(results => console.log(results))\r\n  .catch(error => console.error(error));\r\n```\r\n\r\n<a name=\"geocode-by-place-id\"></a>\r\n\r\n### `geocodeByPlaceId` API\r\n\r\n```js\r\n/**\r\n * Returns a promise\r\n * @param {String} placeId\r\n * @return {Promise}\r\n */\r\ngeocodeByPlaceId(placeId);\r\n```\r\n\r\n#### placeId\r\n\r\nType: `String`,\r\nRequired: `true`\r\n\r\nString that gets passed to Google Maps [Geocoder](https://developers.google.com/maps/documentation/javascript/geocoding)\r\n\r\n```js\r\nimport { geocodeByPlaceId } from 'react-places-autocomplete';\r\n\r\n// `results` is an entire payload from Google API.\r\ngeocodeByPlaceId('ChIJE9on3F3HwoAR9AhGJW_fL-I')\r\n  .then(results => console.log(results))\r\n  .catch(error => console.error(error));\r\n```\r\n\r\n<a name=\"get-lat-lng\"></a>\r\n\r\n### `getLatLng` API\r\n\r\n```js\r\n/**\r\n * Returns a promise\r\n * @param {Object} result\r\n * @return {Promise}\r\n */\r\ngetLatLng(result);\r\n```\r\n\r\n#### result\r\n\r\nType: `Object`\r\nRequired: `true`\r\n\r\nOne of the element from `results` (returned from Google Maps Geocoder)\r\n\r\n```js\r\nimport { geocodeByAddress, getLatLng } from 'react-places-autocomplete';\r\n\r\ngeocodeByAddress('Tokyo, Japan')\r\n  .then(results => getLatLng(results[0]))\r\n  .then(({ lat, lng }) =>\r\n    console.log('Successfully got latitude and longitude', { lat, lng })\r\n  );\r\n```\r\n\r\n### Discussion\r\n\r\nJoin us on [Gitter](https://gitter.im/react-places-autocomplete/Lobby) if you are interested in contributing!\r\n\r\n### License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}