https://github.com/akofman/react-select-places
🌍 A Select control for places built from React-Select and Google Places API.
https://github.com/akofman/react-select-places
google-places react react-component react-select
Last synced: 9 months ago
JSON representation
🌍 A Select control for places built from React-Select and Google Places API.
- Host: GitHub
- URL: https://github.com/akofman/react-select-places
- Owner: akofman
- License: mit
- Created: 2017-03-29T14:28:43.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-21T07:29:47.000Z (almost 9 years ago)
- Last Synced: 2025-04-13T16:05:24.111Z (10 months ago)
- Topics: google-places, react, react-component, react-select
- Language: JavaScript
- Homepage: http://akofman.github.io/react-select-places
- Size: 409 KB
- Stars: 8
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Select-Places
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
[](https://github.com/prettier/prettier)
A Select control for places built from [React-Select](https://github.com/JedWatson/react-select) and [Google Places](https://developers.google.com/places/).
## Demo & Examples
Live demo: [akofman.github.io/react-select-places](https://akofman.github.io/react-select-places)
To run it locally, clone this repo then run:
```javascript
npm install
npm run storybook
```
Then open [`localhost:6006`](http://localhost:6006) in a browser.
## Installation
: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`.
```javascript
npm install --save react-select
npm install --save react-select-places
```
Then you can import `react-select-places` in your application:
```js
import SelectPlaces from 'react-select-places';
```
In order to style SelectPlaces, you can import the `react-select` css:
```js
import 'react-select/dist/react-select.css';
```
Or you can use [styled-component](https://github.com/styled-components/styled-components).
## Usage
`React-Select-Places` uses the Google Maps Places API, so you need to include it in the `` of your HTML:
```html
…
…
```
It wraps `React-Select` so that you can use all of its [options](https://github.com/JedWatson/react-select#usage).
Example:
```javascript
var SelectPlaces = require('react-select-places');
function logChange(val) {
console.log("Selected: " + val);
}
```
The 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).
You 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.
Example:
```javascript
const autocompletionRequest = {
types: ['(cities)'],
componentRestrictions: {
country: 'FR'
}
};
```
A default value can be provided from the `value` property:
```javascript
```
The `value` property can be an object with the `label` and `placeId` attributes.
If `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.
```javascript
```
It is also possible to provide only the label as a string:
```javascript
```
# Contributing
See the [CONTRIBUTING.md](https://github.com/akofman/react-select-places/blob/master/CONTRIBUTING.md) for information on how to contribute.
# License
MIT Licensed. Copyright (c) Alexis Kofman 2017.
[build-badge]: https://img.shields.io/travis/akofman/react-select-places/master.png?style=flat-square
[build]: https://travis-ci.org/akofman/react-select-places
[npm-badge]: https://img.shields.io/npm/v/react-select-places.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-select-places
[coveralls-badge]: https://img.shields.io/coveralls/akofman/react-select-places/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/akofman/react-select-places