React-place NPM

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>