React-Select-Places

A Select control for places built from React-Select and Google Places.

Demo & Examples

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.

Installation

⚠️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.

Usage

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' />

Contributing

See the CONTRIBUTING.md for information on how to contribute.

akofman / react-select-places Goto Github PK