Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
react-geosuggest
Advanced tools
Readme
A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults.
Live demo: ubilabs.github.io/react-geosuggest
As this component uses the Google Maps Places API to get suggests, you must include the Google Maps Places API in the <head>
of your HTML:
<!DOCTYPE html>
<html>
<head>
…
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
<body>
…
</body>
</html>
The easiest way to use geosuggest is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/geosuggest.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-geosuggest --save
The Geosuggest works out of the box by just including it. However, you can customize the behaviour with the properties noted below.
var Geosuggest = require('geosuggest');
<Geosuggest />
Type: String
Default: Search places
The input field will get this placeholder text.
Type: google.maps.LatLng
Default: null
To get localized suggestions, define a location to bias the suggests.
Type: Number
Default: 0
The radius defines the area around the locaiton to use for biasing the suggests. It must be accompanied by a location
parameter.
Type: Array
Default: []
An array with fixtures (defaults). Each fixture has to be an object with a label
key in it. Optionally provide a location
, but the Geosuggest will geocode the label if no location is provided.
Type: Function
Default: function(suggest) {}
Gets triggered when a suggest got selected. Only parameter is the selected suggest.
var React = require('react'),
Geosuggest = require('./src/Geosuggest.jsx');
var App = React.createClass({
/**
* Render the example app
*/
render: function() {
var fixtures = [
{label: 'Old Elbe Tunnel, Hamburg', location: {lat: 53.5459, lng: 9.966576}},
{label: 'Reeperbahn, Hamburg', location: {lat: 53.5495629, lng: 9.9625838}},
{label: 'Alster, Hamburg', location: {lat: 53.5610398, lng: 10.0259135}}
];
return (
<div>
<Geosuggest
placeholder="Start typing!"
fixtures={fixtures}
onSuggestSelect={this.onSuggestSelect}
location={new google.maps.LatLng(53.558572, 9.9278215)}
radius="20" />
</div>
)
},
/**
* When a suggest got selected
* @param {Object} suggest The suggest
*/
onSuggestSelect: function(suggest) {
console.log(suggest);
}
});
React.render(<App />, document.getElementById('app'));
This component uses BEM for namespacing the CSS classes. So styling should be easy and without conflicts. See the geosuggest.css for an example styling.
To build the examples locally, run:
npm install
gulp serve
Then open localhost:8000
in a browser.
To release & deploy, run the following
gulp release:patch|minor|major
The MIT License (MIT) Copyright (c) 2015 Ubilabs katzki@ubilabs.net
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
FAQs
A React autosuggest for the Google Maps Places API.
We found that react-geosuggest demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).