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 storybookThen 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-placesThen 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.