1.0.5 • Published 5 years ago

@seanhouli/react-mapbox-search v1.0.5

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

react-mapbox-search

A location picker powered by mapbox, implemented in React.

demo gif of react-mapbox-search

Quick Start

npm i @seanhouli/react-mapbox-search

Features

  • Suggestions for locations using the mapbox API
  • Autofill when user selects suggestion
  • Suggestions selectable with mouse click or with arrow key up/down + enter key
  • Callback when location is selected, providing the mapbox location object and click event if selected with mouse
  • Custom selection color
  • Optional ISO 3166-1 country code prop to narrow search
  • Placeholder text set through prop for localization support

Usage

import SearchBox from "@seanhouli/react-mapbox-search";

<SearchBox
    token={mapBoxApiToken}
    country="US"
    callback={({ location, event }) => {
        // location object from mapbox
        // event onMouseDown supplied if suggestion clicked
    })}
    selectColor="#ef4836"
/>

API

PropTypeDefaultDescription
tokenstringmapbox API token
countrystringundefinedISO 3166-1 country code to narrow search
callbackfunctionundefinedCallback function fired when suggestion chosen
selectColorstring"#58A"Color for currently selected suggestion item
searchHintstring"Search"Placeholder text for input when empty
querystring""Default query to populate input