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 Powered by Google API
