react-place

    0.6.2 • Public • Published

    React geo location component based on Google Maps

    The component uses Google Maps API to fetch the locations. It uses Awesomplete as a hard dependency for the dropdown.

    Check out the demo here.

    react-place

    Installation

    npm install react-place
    

    Dependencies

    • Of course react and react-dom. You need to have these modules installed.
    • Awesomplete - installed automatically while running npm install react-place. It comes with the component so you don't need to have it loaded on the page.
    • Google Maps API - you have to add <script src="//maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> to your page to have the component working.

    Usage (ES6)

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Location from 'react-place';
     
    var location;
    var container = document.querySelector('...');
     
    var onLocationSet = (data) => {
      // data.description
      // data.coords.lat
      // data.coords.lng
    };
     
    location = ReactDOM.render(
      <Location
        country='US'
        noMatching='Sorry, I can not find {{value}}.'
        onLocationSet={ onLocationSet }
        inputProps={{
          style: {color: '#0099FF'},
          className:'location',
          placeholder: 'Where are your?'
        }}
        />,
      container
    );

    Usage ES5 (with bundling)

    var React = require('react');
    var ReactDOM = require('react-dom');
    var Location = require('react-place');
    var createLocation = React.createFactory(Location);
     
    function onLocationSet (data) {
      // data.description
      // data.coords.lat
      // data.coords.lng
    }
     
    var container = document.querySelector('#container');
    var LocationComp = createLocation({
      country: country.value,
      noMatching: 'Sorry, I can not find {{value}}.',
      onLocationSet: onLocationSet,
      inputProps={{
        style: {color: '#0099FF'},
        className:'location',
        placeholder: 'Where are your?'
      }}
    });
     
    var location = ReactDOM.render(LocationComp, container);

    If you need to update the country dynamically use the following API:

    location.updateCountry('FR');

    Usage ES5 (no bundling)

    Download react-place.min.js file and add it to your page.

    <script src="//maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
    <script src="react-place.min.js"></script>
    <script>
     
      var createLocation = React.createFactory(ReactPlace);
     
      function onLocationSet(data) {
        // data.description
        // data.coords.lat
        // data.coords.lng
      }
     
      window.onload = function () {
        var container = document.querySelector('...');
        var LocationComp = createLocation({
          country: country.value,
          noMatching: 'Sorry, I can not find {{value}}.',
          onLocationSet: onLocationSet,
          inputProps={{
            style: {color: '#0099FF'},
            className:'location',
            placeholder: 'Where are your?'
          }}
        });
        var l = ReactDOM.render(LocationComp, container);
      };
     
    </script>

    Testing

    npm run test
    

    Powered by Google API

    powered by google

    Install

    npm i react-place

    DownloadsWeekly Downloads

    43

    Version

    0.6.2

    License

    MIT

    Last publish

    Collaborators

    • krasimir