# @seanhouli/react-mapbox-search

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

Latest version **1.0.5** (published 2019-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @seanhouli/react-mapbox-search
pnpm add @seanhouli/react-mapbox-search
yarn add @seanhouli/react-mapbox-search
bun add @seanhouli/react-mapbox-search
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-07-08 |
| First published | 2019-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 22.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Sean Houilhan |
| Maintainers | seanhouli |
| Keywords | react, mapbox, location picker, location, suggestions |

## Links

- npm: https://www.npmjs.com/package/@seanhouli/react-mapbox-search
- Repository: https://github.com/seanhouli/react-mapbox-search
- Homepage: https://github.com/seanhouli/react-mapbox-search#readme
- Issues: https://github.com/seanhouli/react-mapbox-search/issues
- npm.io page: https://npm.io/package/@seanhouli/react-mapbox-search

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-icons](https://npm.io/package/react-icons.md) ^2.2.5
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.5
- [styled-components](https://npm.io/package/styled-components.md) ^2.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-07-08
- 1.0.4 — 2019-07-08
- 1.0.3 — 2019-07-02
- 1.0.2 — 2019-06-26
- 1.0.1 — 2019-06-26
- 1.0.0 — 2019-06-25

## README

# react-mapbox-search

A location picker powered by mapbox, implemented in React.

![demo gif of react-mapbox-search](https://media.giphy.com/media/IffWfXObtB1KwxDUeQ/giphy.gif)

## 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

```javascript
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                |

---
_Source: https://npm.io/package/@seanhouli/react-mapbox-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._