# @coopdigital/component-searchable-dropdown

> Co-op Component: Searchable Dropdown

Latest version **0.2.7** (published 2023-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @coopdigital/component-searchable-dropdown
pnpm add @coopdigital/component-searchable-dropdown
yarn add @coopdigital/component-searchable-dropdown
bun add @coopdigital/component-searchable-dropdown
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2023-02-21 |
| First published | 2022-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @coopdigital |
| Maintainers | coopexperience, omidantilong, mitcheh, matt-tyas, joemcgirr, hanross, coopjames |
| Keywords | combobox, searchable dropdown, select, filterable dropdown |

## Links

- npm: https://www.npmjs.com/package/@coopdigital/component-searchable-dropdown
- Repository: https://github.com/coopdigital/coop-frontend
- Homepage: https://github.com/coopdigital/coop-frontend/tree/master/packages/component-searchable-dropdown#readme
- Issues: https://github.com/coopdigital/coop-frontend/issues
- npm.io page: https://npm.io/package/@coopdigital/component-searchable-dropdown

## Dependencies (2)

- [downshift](https://npm.io/package/downshift.md) ^6.1.7
- [match-sorter](https://npm.io/package/match-sorter.md) ^6.3.1

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.2.7 (latest) — 2023-02-21
- 0.2.6 — 2022-12-02
- 0.2.5 — 2022-08-02
- 0.2.3 — 2022-07-29
- 0.2.2 — 2022-07-29
- 0.2.1 — 2022-07-28

## README

# Searchable Dropdown

A Co-op styled searchable dropdown (aka combobox) React component built using [Downshift](https://www.downshift-js.com/).

## Installation

Install via `npm` or `yarn`:

```bash
npm install @coopdigital/component-searchable-dropdown

yarn add @coopdigital/component-searchable-dropdown
```

## Prerequisites

> You must have the Co-op foundations and foundations-forms css packages installed in your project. You will also need React 17 or higher.

```css
@import "@coopdigital/foundations/dist/vars/vars.css";
@import "@coopdigital/foundations/dist/foundations.css";
@import "@coopdigital/foundations-forms/dist/forms.css";
```

## Importing

```css
@import "@coopdigital/component-searchable-dropdown/dist/styles.css";
```

```js
import { SearchableDropdown } from "@coopdigital/component-searchable-dropdown";
```

## Basic Usage

```js
<SearchableDropdown
  label="My favourite animal is a..."
  id="animals"
  options={["Cat", "Dog", "Frog", "Panda", "Sloth"]}
/>
```

## Required props

These props are required for the component to render:

| prop      | type     | description                               |
| --------- | -------- | ----------------------------------------- |
| `label`   | `string` | Text for the associated element label.    |
| `id`      | `string` | A unique identifier for the element.      |
| `options` | `array`  | Array of strings to use for option values |

## Additional props

The component can be further customised using the props below:

| prop          | type     | description                                                                                     | default             |
| ------------- | -------- | ----------------------------------------------------------------------------------------------- | ------------------- |
| `className`   | `string` | Additional class (or classes) to append to the outer coop-c-combobox element                    | -                   |
| `compact`     | `bool`   | Reduces the input font size to 1rem                                                             | false               |
| `noResults`   | `string` | String to display when no matching options are found                                            | No relevant options |
| `onSelect`    | `func`   | Callback function when an option is selected, receives the selected value as its only parameter | -                   |
| `placeholder` | `string` | Placeholder text to display when no option is selected                                          | -                   |
| `style`       | `object` | CSS object with inline styles to be added to the outer coop-c-combobox element                  | -                   |

## Kitchen sink

```js
<SearchableDropdown
  label="My favourite animal is a..."
  id="animals"
  options={["Cat", "Dog", "Frog", "Panda", "Sloth"]}
  className="additional-class another-class"
  compact
  placeholder="Select option"
  onSelect={(value) => {
    console.log(value);
  }}
  style={{ width: "300px" }}
/>
```

## License

Copyright (c) 2022 Co-operative Group Limited.
Licensed [MIT](https://github.com/coopdigital/coop-frontend/blob/master/LICENSE).

---
_Source: https://npm.io/package/@coopdigital/component-searchable-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._