react-select-places

    1.1.8 • Public • Published

    React-Select-Places

    Travis npm package Coveralls styled with prettier

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

    Demo & Examples

    demo

    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.

    License

    MIT Licensed. Copyright (c) Alexis Kofman 2017.

    Install

    npm i react-select-places

    DownloadsWeekly Downloads

    22

    Version

    1.1.8

    License

    MIT

    Last publish

    Collaborators

    • alexiskofman