A Select control for places built from React-Select and Google Places.
Live demo: akofman.github.io/react-select-places
To run it locally, clone this repo then run:
npm install
npm run storybook
Then open localhost:6006
in a browser.
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
.
npm install --save react-select
npm install --save react-select-places
Then you can import react-select-places
in your application:
import SelectPlaces from 'react-select-places';
In order to style SelectPlaces, you can import the react-select
css:
import 'react-select/dist/react-select.css';
Or you can use styled-component.
React-Select-Places
uses the Google Maps Places API, so you need to include it in the <head>
of your HTML:
<!DOCTYPE html>
<html>
<head>
β¦
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
</head>
<body>
β¦
</body>
</html>
It wraps React-Select
so that you can use all of its options.
Example:
var SelectPlaces = require('react-select-places');
function logChange(val) {
console.log("Selected: " + val);
}
<SelectPlaces
onChange={logChange}
/>
The value retrieved from the parameter of the onChange
callback is a PlaceResult.
You also have the possibility to configure the AutocompletionRequest as it is specified in the Google Places API.
Example:
const autocompletionRequest = {
types: ['(cities)'],
componentRestrictions: {
country: 'FR'
}
};
<SelectPlaces autocompletionRequest={autocompletionRequest} />
A default value can be provided from the value
property:
<SelectPlaces value={{ label:'Paris' }} />
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.
<SelectPlaces value={{ label:'defaultLabel', placeId:'ChIJpTvG15DL1IkRd8S0KlBVNTI' }} />
It is also possible to provide only the label as a string:
<SelectPlaces value='Paris' />
See the CONTRIBUTING.md for information on how to contribute.
MIT Licensed. Copyright (c) Alexis Kofman 2017.