React-mapbox-autocomplete NPM

Independent geolocation autocomplete component based on Mapbox

Maintained and Developed By: Localvore Today

The component uses mapbox api to autocompelete cities and states without mapbox maps. It's designed to be extremely light weight and simple to use.

Change Log

version 0.2.3
Upgrade to React es6 class implmentation and updated babel presets

version 0.2.2
Bug fixes for search results when resetSearch is false

version 0.2.0
Add the ability to prepopulate the input field using the query param
Resetting the input after selection is now optional
Added lat, lng, and text to event.target.dataset

Dependencies

Lodash

React 15+

Mapbox Account + API Key

react-mapbox-autocomplete is designed to be agnostic of environment. Works with any data store(redux, flux, etc) and is compiled to vanilla javascript to work with any version of ES.

Installation

npm install react-mapbox-autocomplete

Example(ES6)

Available PropTypes

publicKey:Required(String)

inputClass:Optional(String):Used for passing bootstrap or other classes for input styling

country:Optional(String)

onSuggestionSelect:Required(Func):For handling suggestion selections

query:Optional(String):Pre-populate search field

resetSearch:Optional(Boolean): Default is false. Resets the input field after suggestion select

Retriving Suggestion Information

you can retrive the event data by targeting event.target.dataset.suggestion as seen in the example below.

.search {
  margin-bottom: 1.5rem;
}

import MapboxAutocomplete from 'react-mapbox-autocomplete';

_suggestionSelect(result, lat, lng, text) {
  console.log(result, lat, lng, text)
}

<MapboxAutocomplete publicKey='Your Mapbox Public Key'
                    inputClass='form-control search'
                    onSuggestionSelect={this._suggestionSelect}
                    country='us'
                    resetSearch={false}/>

Styling

You can style the following classes as you see fit.

.react-mapbox-ac-menu {
  width: auto;
  position: absolute;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ccc;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: -1.3rem;
}

.react-mapbox-ac-input {
  margin-bottom: 1.5rem;
}

.react-mapbox-ac-suggestion {
  font-size: 18px;
  margin-bottom: .5rem;
  cursor: pointer;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.react-mapbox-ac-suggestion:hover {
  background-color: #58a;
}