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.
npm install react-place
- 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.
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
className='location'
placeholder='Where are you?'
country='US'
noMatching='Sorry, I can not find {{value}}.'
onLocationSet={ onLocationSet }
/>,
container
);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({
className: 'location',
placeholder: 'Where are you?',
country: country.value,
noMatching: 'Sorry, I can not find {{value}}.',
onLocationSet: onLocationSet
});
var location = ReactDOM.render(LocationComp, container);If you need to update the country dynamically use the following API:
location.updateCountry('FR');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({
className: 'location',
placeholder: 'Where are you?',
country: country.value,
noMatching: 'Sorry, I can not find {{value}}.',
onLocationSet: onLocationSet
});
var l = ReactDOM.render(LocationComp, container);
};
</script>npm run test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent