react-mapbox-search

A location picker powered by mapbox, implemented in React.

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

Prop	Type	Default	Description
token	string		mapbox API token
country	string	undefined	ISO 3166-1 country code to narrow search
callback	function	undefined	Callback function fired when suggestion chosen
selectColor	string	"#58A"	Color for currently selected suggestion item
searchHint	string	"Search"	Placeholder text for input when empty
query	string	""	Default query to populate input