Socket
Socket
Sign inDemoInstall

react-geosuggest-plus

Package Overview
Dependencies
21
Maintainers
2
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-geosuggest-plus

A React autosuggest for the Google Maps Places API.


Version published
Maintainers
2
Weekly downloads
15
decreased by-37.5%

Weekly downloads

Readme

Source

React Geosuggest Build Status

A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults which continue to appear even during active input. Originally forked from ubilabs-react-geosuggest.

Demo

Live demo: ubilabs.github.io/react-geosuggest

Installation

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).

npm install react-geosuggest-plus --save

Usage

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('react-geosuggest-plus');

<Geosuggest />

Properties

autoActivateFirstSuggest

Type: Boolean Default: false

Automatically activate the first suggestion as you type. If false, the exact term(s) in the input will be used when searching and may return a result not in the list of suggestions.

bounds

Type: LatLngBounds Default: null

The bounds to use for biasing the suggests. If this is set, location and radius are ignored.

buttonMarkup

Type: Function Default: () => (<button>Enter</button>)

The markup used for the submit button. This allows users to provide their own submit button. This is not rendered by default, unless the showButton property is set to true

className

Type: String Default: ''

Add an additional class to the geosuggest container.

country

Type: String Default: null

Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). E.g., us, br, au.

disabled

Type: Boolean Default: false

Defines whether the input is disabled.

fixtures

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.

You can also add a className key to a fixture. This class will be applied to the fixture item.

getRecentLabel

Type: Function Default: (suggest) => suggest.zipcode

This function is used as an accessor for 'fixtures'. Since fixtures do not have a label property, this function is used to select the property that will be used instead. The default is the zipcode of the suggestion.

getSuggestLabel

Type: Function Default: (suggest) => suggest.description

Used to generate a custom label for a suggest. Only parameter is a suggest (google.maps.places.AutocompletePrediction). Check the Google Maps Reference for more information on it’s structure.

googleMaps

Type: Object Default: google.maps

In case you want to provide your own Google Maps object, pass it in as googleMaps. The default is the global google maps object.

hideClearButton

Type: Boolean Default: false

Optionally disable the 'clear' button for a more minimal ui.

onFocus

Type: Function Default: () => {}

A function that returns custom markup to be used when there are no available suggestions.

onBlur

Type: Function Default: (event) => {}

Gets triggered when input field loses focus.

onChange

Type: Function Default: (event) => {}

Gets triggered when input field changes the value

onClearClick

Type: Function Default: (event) => {}

Gets triggered when the user 'clears' the input by pressing the clear button.

onClick

Type: Function Default: (event) => {}

Gets triggered when the user clicks the input or the submit button.

onEmptySuggests

Type: Function Default: (event) => {}

Gets triggered when the user hits the 'enter' button but no suggestions are selected.

onFocus

Type: Function Default: function() {}

Gets triggered when the input field receives focus.

onSuggestSelect

Type: Function Default: function(suggest) {}

Gets triggered when a suggest got selected. Only parameter is an object with data of the selected suggest. This data is available:

  • label – Type String – The label name
  • placeId – Type String – If it is a preset, equals the label. Else it is the Google Maps placeID
  • location – Type Object – The location containing lat and lng
  • gmaps – Type Object – Optional! The complete response when there was a Google Maps geocode necessary (e.g. no location provided for presets). Check the Google Maps Reference for more information on it’s structure.
placeholder

Type: String Default: Search places

The input field will get this placeholder text.

radius

Type: Number Default: 0

The radius defines the area around the location to use for biasing the suggests. It must be accompanied by a location parameter.

recentListItemMarkup

Type: Component | Function Default: <RecentListItem />

The component used to display 'fixtures', or 'recents'. This defaults to the internal <RecentListItem /> component.

Props

  • classes -- optional classes to pass to the component
  • onClick -- A function to call when the component is clicked (with the google suggest)
  • suggest -- The google suggestion
recentsLimit

Type: Number Default: 5

The max number of 'fixtures' to render.

showButton

Type: Boolean Default: false

Whether or not to show the custom submit button.

skipSuggest

Type: Function Default: (suggest) => {}

If the function returns true then the suggest will not be included in the displayed results. Only parameter is an object with data of the selected suggest. (See above)

types

Type: Array Default: null

Restricts the suggestions against the passed in types. If none are specified, all types are used. Consult the Google Docs for possible types.

Exposed component functions

update(value)

It is possible to update the value of the input contained within the GeoSuggest component by calling the update function with a new desired value of the type String.

clear()

It is also possible to clear the value of the input contained within the GeoSuggest component by calling the clear function.

Example

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!"
          initialValue="Hamburg"
          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'));

Styling

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.

Contributing

Development

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Deployment

To release & deploy, run the following

npm run release:patch|minor|major

License

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.

Keywords

FAQs

Last updated on 17 Mar 2017

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc