react-place
v0.6.2
Published
React geo location component based on Google Maps
Downloads
10
Maintainers
Readme
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.
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