{"id":26423211,"url":"https://github.com/alduncanson/react-address-autocomplete","last_synced_at":"2025-03-18T02:46:58.950Z","repository":{"id":36531698,"uuid":"228082893","full_name":"alDuncanson/react-address-autocomplete","owner":"alDuncanson","description":"An easy to use text input for addresses with autocompletion.","archived":false,"fork":false,"pushed_at":"2022-12-09T00:57:34.000Z","size":1204,"stargazers_count":8,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-24T00:19:22.479Z","etag":null,"topics":["address","autocomplete","google","javascript","npm","react"],"latest_commit_sha":null,"homepage":"https://react-address-autocomplete.netlify.com/","language":"JavaScript","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/alDuncanson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"alDuncanson","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-12-14T20:14:02.000Z","updated_at":"2024-03-28T14:58:54.000Z","dependencies_parsed_at":"2023-01-17T02:22:02.450Z","dependency_job_id":null,"html_url":"https://github.com/alDuncanson/react-address-autocomplete","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alDuncanson%2Freact-address-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alDuncanson%2Freact-address-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alDuncanson%2Freact-address-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alDuncanson%2Freact-address-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alDuncanson","download_url":"https://codeload.github.com/alDuncanson/react-address-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244147377,"owners_count":20405940,"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":["address","autocomplete","google","javascript","npm","react"],"created_at":"2025-03-18T02:46:58.389Z","updated_at":"2025-03-18T02:46:58.943Z","avatar_url":"https://github.com/alDuncanson.png","language":"JavaScript","funding_links":["https://github.com/sponsors/alDuncanson"],"categories":[],"sub_categories":[],"readme":"# react-address-autocomplete\n\n![npm](https://img.shields.io/npm/dt/@alduncanson/react-address-autocomplete)\n![license](https://img.shields.io/npm/l/@alduncanson/react-address-autocomplete)\n![min](https://img.shields.io/bundlephobia/min/@alduncanson/react-address-autocomplete)\n\n![stars](https://img.shields.io/github/stars/alDuncanson/react-address-autocomplete?style=social)\n\nA simple text input for entering addresses using Google's Places API. You can try it out [here!](https://react-address-autocomplete.netlify.app/)\n\n# Demo\n![react address autocomplete demo gif](https://raw.githubusercontent.com/alDuncanson/react-address-autocomplete/master/autocomplete.gif)\n\n# Install\n\n_Requires React 16 or later_\n\n```sh\nnpm install --save @alduncanson/react-address-autocomplete\n```\n\nor\n\n```sh\nyarn add @alduncanson/react-address-autocomplete\n```\n\n# Usage\n\n```jsx\nimport React from 'react'\nimport './App.css'\n\nimport AddressInput from '@alDuncanson/react-address-autocomplete'\n\nexport const App = () =\u003e {\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cheader className='App-header'\u003e\n        \u003cdiv style={{ width: '34%' }}\u003e\n          \u003cAddressInput apiKey='YOUR API KEY' handleAddress={address =\u003e console.log(address)}/\u003e\n        \u003c/div\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nAfter you start typing, you can then navigate through the prediction list with your mouse or keyboard with \u003ckbd\u003e\u0026#8593;\u003c/kbd\u003e and \u003ckbd\u003e\u0026darr;\u003c/kbd\u003e arrow keys and select your address by clicking or pressing the \u003ckbd\u003eEnter\u003c/kbd\u003e key\n\n# Props\n\n- `style`: Object - style object for the `\u003cinput/\u003e` element\n- `placeholder`: String - input placeholder text. Otherwise defaults to 'Address'\n- `handleAddress`: Callback - a function that takes the selected address as a parameter and returns it as a string\n- `apiKey`: String - your Google Places API Key\n\n# Contributing\n\nPull requests are welcome and greatly appreciated. As new as this module is, I am still working on setting up a proper contribution flow as well as making an actual build/bundling script to make helping out easier. If you have suggestions, submit them as an issue please :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falduncanson%2Freact-address-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falduncanson%2Freact-address-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falduncanson%2Freact-address-autocomplete/lists"}