{"id":21916881,"url":"https://github.com/zenoo/mui-address-autocomplete","last_synced_at":"2025-04-19T03:19:33.726Z","repository":{"id":41834600,"uuid":"436558623","full_name":"Zenoo/mui-address-autocomplete","owner":"Zenoo","description":"MUI address search autocomplete component","archived":false,"fork":false,"pushed_at":"2024-10-19T13:42:06.000Z","size":3130,"stargazers_count":12,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T06:43:13.591Z","etag":null,"topics":["address","autocomplete","google-maps","material-ui","mui","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Zenoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-12-09T09:37:21.000Z","updated_at":"2024-11-19T09:41:54.000Z","dependencies_parsed_at":"2024-01-10T08:45:30.300Z","dependency_job_id":"118572de-0ea3-4203-af02-ab846cb685f3","html_url":"https://github.com/Zenoo/mui-address-autocomplete","commit_stats":{"total_commits":101,"total_committers":2,"mean_commits":50.5,"dds":0.04950495049504955,"last_synced_commit":"c27d3ed3238d52ad12794ea2d5412d69633adc40"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2Fmui-address-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2Fmui-address-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2Fmui-address-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zenoo%2Fmui-address-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zenoo","download_url":"https://codeload.github.com/Zenoo/mui-address-autocomplete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249598382,"owners_count":21297464,"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-maps","material-ui","mui","react"],"created_at":"2024-11-28T19:21:21.777Z","updated_at":"2025-04-19T03:19:33.697Z","avatar_url":"https://github.com/Zenoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MUI Address Autocomplete\r\n\r\n![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/zenoo/mui-address-autocomplete/@mui/material)\r\n![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/zenoo/mui-address-autocomplete/react)\r\n\r\nA simple, straight-forward address autocomplete component for MUI.\r\n\r\n## Demo\r\n\r\n![](https://i.imgur.com/xT77nFw.png)\r\n\r\n## Installation\r\n```\r\nnpm i mui-address-autocomplete\r\n```\r\n\r\n## Props\r\n```ts\r\ninterface AddressAutocompleteProps extends AutocompleteProps {\r\n  apiKey?: string;\r\n  fields?: string[] = ['address_components', 'formatted_address'];\r\n  label: string;\r\n  renderInput?: (params: AutocompleteRenderInputParams) =\u003e React.ReactNode;\r\n  onChange: (\r\n    event: React.SyntheticEvent\u003cElement, Event\u003e,\r\n    value: AddressAutocompleteValue,\r\n    reason: AutocompleteChangeReason\r\n  ) =\u003e void;\r\n  value: AddressAutocompleteValue | null;\r\n  requestOptions?: Omit\u003cgoogle.maps.places.AutocompletionRequest, 'input'\u003e;\r\n}\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport AddressAutocomplete from 'mui-address-autocomplete';\r\n\r\n\u003cAddressAutocomplete\r\n  apiKey=\"googlePlacesApiKeyHere\"\r\n  label=\"Address\"\r\n  fields={['geometry']} // fields will always contain address_components and formatted_address, no need to repeat them\r\n  onChange={(_, value) =\u003e {\r\n    console.log(value);\r\n  }}\r\n/\u003e\r\n```\r\n\r\nAll of MUI's [`\u003cAutocomplete\u003e`](https://mui.com/api/autocomplete/) props are supported.\r\n\r\n## Result type\r\n\r\nThe result contains [the fields exposed by Google Places API](https://developers.google.com/maps/documentation/places/web-service/details#Place).  \r\nIn addition, a new field `components` is added to the result. It contains a more easily accessible version of the address components.  \r\nYou can use it like this:\r\n\r\n```jsx\r\nvalue.components.street_number[0].long_name\r\n```\r\n\r\n```ts\r\ninterface AddressAutocompleteResultComponent {\r\n  long_name: string;\r\n  short_name: string;\r\n}\r\n\r\ninterface AddressAutocompleteValue extends PlaceType, google.maps.places.PlaceResult {\r\n  components: {\r\n    administrative_area_level_1?: AddressAutocompleteResultComponent[];\r\n    administrative_area_level_2?: AddressAutocompleteResultComponent[];\r\n    administrative_area_level_3?: AddressAutocompleteResultComponent[];\r\n    administrative_area_level_4?: AddressAutocompleteResultComponent[];\r\n    administrative_area_level_5?: AddressAutocompleteResultComponent[];\r\n    administrative_area_level_6?: AddressAutocompleteResultComponent[];\r\n    administrative_area_level_7?: AddressAutocompleteResultComponent[];\r\n    archipelago?: AddressAutocompleteResultComponent[];\r\n    colloquial_area?: AddressAutocompleteResultComponent[];\r\n    continent?: AddressAutocompleteResultComponent[];\r\n    country?: AddressAutocompleteResultComponent[];\r\n    establishment?: AddressAutocompleteResultComponent[];\r\n    finance?: AddressAutocompleteResultComponent[];\r\n    floor?: AddressAutocompleteResultComponent[];\r\n    food?: AddressAutocompleteResultComponent[];\r\n    general_contractor?: AddressAutocompleteResultComponent[];\r\n    geocode?: AddressAutocompleteResultComponent[];\r\n    health?: AddressAutocompleteResultComponent[];\r\n    intersection?: AddressAutocompleteResultComponent[];\r\n    landmark?: AddressAutocompleteResultComponent[];\r\n    locality?: AddressAutocompleteResultComponent[];\r\n    natural_feature?: AddressAutocompleteResultComponent[];\r\n    neighborhood?: AddressAutocompleteResultComponent[];\r\n    place_of_worship?: AddressAutocompleteResultComponent[];\r\n    plus_code?: AddressAutocompleteResultComponent[];\r\n    point_of_interest?: AddressAutocompleteResultComponent[];\r\n    political?: AddressAutocompleteResultComponent[];\r\n    post_box?: AddressAutocompleteResultComponent[];\r\n    postal_code?: AddressAutocompleteResultComponent[];\r\n    postal_code_prefix?: AddressAutocompleteResultComponent[];\r\n    postal_code_suffix?: AddressAutocompleteResultComponent[];\r\n    postal_town?: AddressAutocompleteResultComponent[];\r\n    premise?: AddressAutocompleteResultComponent[];\r\n    room?: AddressAutocompleteResultComponent[];\r\n    route?: AddressAutocompleteResultComponent[];\r\n    street_address?: AddressAutocompleteResultComponent[];\r\n    street_number?: AddressAutocompleteResultComponent[];\r\n    sublocality?: AddressAutocompleteResultComponent[];\r\n    sublocality_level_1?: AddressAutocompleteResultComponent[];\r\n    sublocality_level_2?: AddressAutocompleteResultComponent[];\r\n    sublocality_level_3?: AddressAutocompleteResultComponent[];\r\n    sublocality_level_4?: AddressAutocompleteResultComponent[];\r\n    sublocality_level_5?: AddressAutocompleteResultComponent[];\r\n    subpremise?: AddressAutocompleteResultComponent[];\r\n    town_square?: AddressAutocompleteResultComponent[];\r\n  };\r\n}\r\n```\r\n\r\n## More examples\r\n\r\n### Default value\r\n\r\n```jsx\r\nconst [value, setValue] = useState\u003cAddressAutocompleteValue | null\u003e({\r\n  place_id: \"ChIJD7fiBh9u5kcRYJSMaMOCCwQ\",\r\n  description: \"Paris, France\",\r\n  components: {},\r\n  structured_formatting: {\r\n    main_text: \"Paris\",\r\n    secondary_text: \"France\",\r\n    main_text_matched_substrings: []\r\n  }\r\n});\r\n\r\nreturn (\r\n  \u003cAddressAutocomplete\r\n    apiKey=\"googlePlacesApiKeyHere\"\r\n    label=\"Address\"\r\n    onChange={(_, value) =\u003e {\r\n      setValue(value);\r\n    }}\r\n    value={value}\r\n  /\u003e\r\n);\r\n```\r\n\r\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenoo%2Fmui-address-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzenoo%2Fmui-address-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzenoo%2Fmui-address-autocomplete/lists"}