A location picker component that uses Mapbox's places API to provide location suggestions

Usage no npm install needed!

<script type="module">
  import seanhouliReactMapboxSearch from 'https://cdn.skypack.dev/@seanhouli/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


  • 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


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

    callback={({ location, event }) => {
        // location object from mapbox
        // event onMouseDown supplied if suggestion clicked


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