{"id":22823232,"url":"https://github.com/akofman/react-select-places","last_synced_at":"2025-04-23T03:49:49.795Z","repository":{"id":57342520,"uuid":"86592295","full_name":"akofman/react-select-places","owner":"akofman","description":"🌍 A Select control for places built from React-Select and Google Places API.","archived":false,"fork":false,"pushed_at":"2017-04-21T07:29:47.000Z","size":419,"stargazers_count":8,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T16:05:24.111Z","etag":null,"topics":["google-places","react","react-component","react-select"],"latest_commit_sha":null,"homepage":"http://akofman.github.io/react-select-places","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/akofman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-29T14:28:43.000Z","updated_at":"2022-08-10T18:37:18.000Z","dependencies_parsed_at":"2022-09-16T02:50:19.700Z","dependency_job_id":null,"html_url":"https://github.com/akofman/react-select-places","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akofman%2Freact-select-places","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akofman%2Freact-select-places/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akofman%2Freact-select-places/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akofman%2Freact-select-places/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akofman","download_url":"https://codeload.github.com/akofman/react-select-places/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249659065,"owners_count":21307300,"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":["google-places","react","react-component","react-select"],"created_at":"2024-12-12T16:15:53.575Z","updated_at":"2025-04-23T03:49:49.773Z","avatar_url":"https://github.com/akofman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Select-Places\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nA Select control for places built from [React-Select](https://github.com/JedWatson/react-select) and [Google Places](https://developers.google.com/places/).\n\n## Demo \u0026 Examples\n![demo](https://cloud.githubusercontent.com/assets/579922/24573198/8470ba08-1680-11e7-8726-e78ade5f0e05.gif)\n\nLive demo: [akofman.github.io/react-select-places](https://akofman.github.io/react-select-places)\n\nTo run it locally, clone this repo then run:\n\n```javascript\nnpm install\nnpm run storybook\n```\n\nThen open [`localhost:6006`](http://localhost:6006) in a browser.\n\n## Installation\n\n:warning:`react-select` is not bundled into this component. You must add it as a dependency of your project in order to use `react-select-places`.\n\n```javascript\nnpm install --save react-select\nnpm install --save react-select-places\n```\n\nThen you can import `react-select-places` in your application:\n\n```js\nimport SelectPlaces from 'react-select-places';\n```\nIn order to style SelectPlaces, you can import the `react-select` css:\n```js\nimport 'react-select/dist/react-select.css';\n```\nOr you can use [styled-component](https://github.com/styled-components/styled-components).\n\n## Usage\n\n`React-Select-Places` uses the Google Maps Places API, so you need to include it in the `\u003chead\u003e` of your HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n  \u003chead\u003e\n    …\n    \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026libraries=places\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    …\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIt wraps `React-Select` so that you can use all of its [options](https://github.com/JedWatson/react-select#usage).\n\nExample:\n\n```javascript\nvar SelectPlaces = require('react-select-places');\n\nfunction logChange(val) {\n  console.log(\"Selected: \" + val);\n}\n\n\u003cSelectPlaces\n  onChange={logChange}\n/\u003e\n```\n\nThe value retrieved from the parameter of the `onChange` callback is a [PlaceResult](https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=fr#PlaceResult).\n\nYou also have the possibility to configure the [AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=fr#AutocompletionRequest) as it is specified in the Google Places API.\n\nExample:\n\n```javascript\nconst autocompletionRequest = {\n  types: ['(cities)'],\n  componentRestrictions: {\n    country: 'FR'\n  }\n};\n\n\u003cSelectPlaces autocompletionRequest={autocompletionRequest} /\u003e\n```\n\nA default value can be provided from the `value` property:\n\n```javascript\n\u003cSelectPlaces value={{ label:'Paris' }} /\u003e\n```\n\nThe `value` property can be an object with the `label` and `placeId` attributes.\nIf `placeId` is provided, this component will use the Google Maps Places API in order to retrieve the label to display in the right language. If the place is not retrieved, the provided `label` will be used.\n\n```javascript\n\u003cSelectPlaces value={{ label:'defaultLabel', placeId:'ChIJpTvG15DL1IkRd8S0KlBVNTI' }} /\u003e\n```\n\nIt is also possible to provide only the label as a string:\n\n```javascript\n\u003cSelectPlaces value='Paris' /\u003e\n```\n\n# Contributing\n\nSee the [CONTRIBUTING.md](https://github.com/akofman/react-select-places/blob/master/CONTRIBUTING.md) for information on how to contribute.\n\n# License\n\nMIT Licensed. Copyright (c) Alexis Kofman 2017.\n\n[build-badge]: https://img.shields.io/travis/akofman/react-select-places/master.png?style=flat-square\n[build]: https://travis-ci.org/akofman/react-select-places\n\n[npm-badge]: https://img.shields.io/npm/v/react-select-places.png?style=flat-square\n[npm]: https://www.npmjs.org/package/react-select-places\n\n[coveralls-badge]: https://img.shields.io/coveralls/akofman/react-select-places/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/akofman/react-select-places\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakofman%2Freact-select-places","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakofman%2Freact-select-places","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakofman%2Freact-select-places/lists"}