├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── build-utils └── postBuild.js ├── docs ├── .gitignore ├── README.md ├── babel.config.js ├── docs │ ├── basic-usage.mdx │ ├── exposed-methods.md │ ├── geocode-by-address.md │ ├── geocode-by-lat-long.md │ ├── geocode-by-place-id.md │ ├── get-lat-long.md │ ├── how-to-contribute.md │ ├── props.md │ ├── recipes.md │ └── v2-to-v3.md ├── docusaurus.config.js ├── package.json ├── sidebars.js ├── src │ ├── css │ │ └── custom.css │ └── pages │ │ ├── index.js │ │ └── styles.module.css ├── static │ ├── .nojekyll │ └── img │ │ ├── customizable.svg │ │ ├── easy-to-use.svg │ │ ├── favicon.ico │ │ └── logo.svg └── yarn.lock ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── google-places-autocomplete.tsx ├── helpers │ └── autocompletion-request-builder.ts ├── hooks │ ├── use-fetch-suggestions.ts │ └── use-places-service.ts ├── index.ts ├── types.ts └── utils │ ├── geocode-by-address.ts │ ├── geocode-by-lat-lng.ts │ ├── geocode-by-place-id.ts │ └── get-lat-lng.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint" 6 | ], 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended", 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended" 12 | ] 13 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Dependency directories 9 | node_modules/ 10 | jspm_packages/ 11 | 12 | # TypeScript v1 declaration files 13 | typings/ 14 | 15 | # Optional npm cache directory 16 | .npm 17 | 18 | # Optional eslint cache 19 | .eslintcache 20 | 21 | # Optional REPL history 22 | .node_repl_history 23 | 24 | # Output of 'npm pack' 25 | *.tgz 26 | 27 | # Yarn Integrity file 28 | .yarn-integrity 29 | 30 | # dotenv environment variables file 31 | .env 32 | 33 | # Ignore build 34 | build 35 | 36 | .DS_Store 37 | 38 | # Ignore vim files 39 | *.swp 40 | *~ 41 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | docs 3 | build-utils 4 | .eslintignore 5 | .eslintrc 6 | .travis.yml 7 | rollup.config.js 8 | tsconfig.json 9 | .yalc 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # .travis.yml 2 | language: node_js 3 | node_js: 4 | - '12' 5 | branches: 6 | only: 7 | - master 8 | cache: 9 | yarn: true 10 | script: 11 | - git config --global user.name "${GH_NAME}" 12 | - git config --global user.email "${GH_EMAIL}" 13 | - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc 14 | - cd docs && yarn && GIT_USER="${GH_NAME}" yarn deploy 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | ----------- 3 | 4 | Copyright (c) 2020 Nicolás Tinte (https://www.tintef.dev) 5 | 6 | Permission is hereby granted, free of charge, to any person 7 | obtaining a copy of this software and associated documentation 8 | files (the "Software"), to deal in the Software without 9 | restriction, including without limitation the rights to use, 10 | copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the 12 | Software is furnished to do so, subject to the following 13 | conditions: 14 | 15 | The above copyright notice and this permission notice shall be 16 | included in all copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 19 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 20 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 21 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 22 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 23 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 24 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 25 | OTHER DEALINGS IN THE SOFTWARE. 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | License 20 | 21 |

22 | 23 | 24 | # React Google Places Autocomplete 25 | 26 | React component for easily use Google Places Autocomplete 27 | 28 | 29 | ## Getting started 30 | 31 | Install the latest version: 32 | ```sh 33 | npm install --save react-google-places-autocomplete 34 | or 35 | yarn add react-google-places-autocomplete 36 | ``` 37 | 38 | Use the component! 39 | ```js 40 | import React from 'react'; 41 | import GooglePlacesAutocomplete from 'react-google-places-autocomplete'; 42 | 43 | const Component = () => ( 44 |
45 | 48 |
49 | ); 50 | 51 | export default Component; 52 | ``` 53 | 54 | **Coming from v2? Check the [migration guide](https://tintef.github.io/react-google-places-autocomplete/docs/v2-to-v3)** 55 | 56 | ## Documentation 57 | 58 | [**Read The Docs**](https://tintef.github.io/react-google-places-autocomplete) 59 | 60 | ## How to contribute? 61 | 62 | 1. Fork this repo 63 | 2. Clone your fork 64 | 3. Code 🤓 65 | 4. Test your changes 66 | 67 | For this, I like to use [yalc](https://github.com/whitecolor/yalc), as it allows to emulate the process of using npm/yarn. 68 | 69 | 1. Install [yalc](https://github.com/whitecolor/yalc) 70 | 2. Build project with `yarn build` or `npm run build` 71 | 3. Publish the package with yalc: `yalc publish` 72 | 4. Add the package to your test project `yalc add react-google-places-automocomplete` 73 | 5. If needed, to update the package on your test project: `yalc update react-google-places-autocomplete` 74 | 75 | 76 | 5. Submit a PR! 77 | 78 | 79 |
80 |
81 |

82 | Icons made by Freepik from www.flaticon.com 83 |

-------------------------------------------------------------------------------- /build-utils/postBuild.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const pkg = require('../package.json'); 3 | 4 | (async () => { 5 | fs.copyFileSync('LICENSE', './build/LICENSE'); 6 | fs.copyFileSync('README.md', './build/README.md'); 7 | fs.writeFileSync('./build/package.json', JSON.stringify({ ...pkg }, null, 2)); 8 | })(); 9 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | ``` 30 | $ GIT_USER= USE_SSH=true yarn deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/docs/basic-usage.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: basic-usage 3 | title: Basics 4 | sidebar_label: Basics 5 | --- 6 | 7 | ## Install 8 | 9 | ```bash 10 | npm install --save react-google-places-autocomplete 11 | ``` 12 | or 13 | ``` 14 | yarn add react-google-places-autocomplete 15 | ``` 16 | 17 | ## Basic Usage 18 | 19 | ### Load Google Maps JavaScript API 20 | 21 | First, generate an `apiKey` in order to use it to load [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/). Then, use it to load it in your HTML file, adding a script tag: 22 | 23 | ```html 24 |