Skip to content

krasimir/react-place

Repository files navigation

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

About

React geo location component based on Google Maps

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published