{"id":18337327,"url":"https://github.com/derrmru/address-autocomplete","last_synced_at":"2025-04-06T04:36:17.073Z","repository":{"id":57325462,"uuid":"385918641","full_name":"derrmru/address-autocomplete","owner":"derrmru","description":"An address form section with autocomplete functionality provided by Google Maps Places API, built as a React reusable component.","archived":false,"fork":false,"pushed_at":"2024-02-12T10:40:37.000Z","size":1244,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T17:37:36.191Z","etag":null,"topics":["places-autocomplete","reactjs","reusable-components"],"latest_commit_sha":null,"homepage":"https://thepetersweeney.com/autocomplete-address/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/derrmru.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-07-14T11:38:39.000Z","updated_at":"2024-02-12T10:40:41.000Z","dependencies_parsed_at":"2024-11-05T20:13:23.665Z","dependency_job_id":null,"html_url":"https://github.com/derrmru/address-autocomplete","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"e026fe6512b162aeac8351d3c17ec550264256fb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derrmru%2Faddress-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derrmru%2Faddress-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derrmru%2Faddress-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derrmru%2Faddress-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/derrmru","download_url":"https://codeload.github.com/derrmru/address-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247435038,"owners_count":20938530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["places-autocomplete","reactjs","reusable-components"],"created_at":"2024-11-05T20:10:47.977Z","updated_at":"2025-04-06T04:36:12.051Z","avatar_url":"https://github.com/derrmru.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/derrmru"],"categories":[],"sub_categories":[],"readme":"# Google Maps Places AutoComplete\n\nThis is a reusable React component for quickly and easily adding an Address section to your forms. \n\nIt uses Google Maps Places Autocomplete service to predict and autocomplete your input fields. \n\nThis component offers a fast setup and inherits the styling of your app.\n\n## Live Demo\n\n![demo](https://raw.githubusercontent.com/derrmru/address-autocomplete/master/resources/example.gif)\n\nTest the demo [here](https://thepetersweeney.com/autocomplete-address)\n\n## Setup\n\n1. Setup the APIS:\n\n - [Enable Google Maps Places API](https://developers.google.com/maps/documentation/javascript/places#enable_apis).\n - [Get an API key](https://developers.google.com/maps/documentation/javascript/get-api-key).\n\n2. In your CLI and once navigated to your React JS project, install with the following command:\n\n```javascript\nnpm i places-autocomplete-react\n```\n\n3. Implement in your app, as per the following example:\n\n```javascript\nimport AutoComplete from 'places-autocomplete-react'\n\nfunction App() {\n  return (\n      \u003cAutoComplete \n        placesKey=\"YOUR_GOOGLE_MAPS_API_KEY\"\n        inputId=\"address\"\n        setAddress={(addressObject) =\u003e console.log(addressObject)}\n        required={true}\n        /\u003e\n  );\n}\n\nexport default App;\n```\n\nThe props are of the following types:\n\n```\nplacesKey: string - this is your api key. The component will handle the rest.\ninputId: string - using distinct id's will allow you to use multiple instances of this component in your form.\nsetAddress: function - the formatted address and input field state is made available to the parent component via this function. It's up to you what you do with it.\nrequired: boolean - (optional) sets the fields as required\n\n```\n\n## Dependencies\n\nNone, just use it in your react project.\n\n## Support Me\n\nIf you find the component useful or like my work, why not buy me a coffee by [clicking here](https://www.buymeacoffee.com/derrmru)\n\n## That's it!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderrmru%2Faddress-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderrmru%2Faddress-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderrmru%2Faddress-autocomplete/lists"}