react-mapbox-autocomplete

Mapbox Geo API
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;
}

ToDo

1. Tests

- Implement JEST - Test: each function and render

1. Add Examples

- add examples to project in a folder called "Examples"

1. Add all query params as Props

- implement the remainder of query params from https://www.mapbox.com/api-documentation/#request-format

Contributing

If you would like to contribute to react-mapbox-autocomplete fork the project and submit a pull request.