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

Package Sidebar

Install

npm i react-place

Weekly Downloads

5

Version

0.6.2

License

MIT

Last publish

Collaborators

  • krasimir