# dropdown-select

> A Dropdown Select Control for React JS

Latest version **3.1.1** (published 2019-05-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install dropdown-select
pnpm add dropdown-select
yarn add dropdown-select
bun add dropdown-select
```

## 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 | 3.1.1 |
| Published | 2019-05-23 |
| First published | 2017-11-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 84.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Thanga Ganapathy |
| Maintainers | ganapathy |
| Keywords | Dropdown, Select, Control, React, JS |

## Links

- npm: https://www.npmjs.com/package/dropdown-select
- Repository: https://github.com/ganapathy888/dropdown-select
- Homepage: https://github.com/ganapathy888/dropdown-select#readme
- Issues: https://github.com/ganapathy888/dropdown-select/issues
- npm.io page: https://npm.io/package/dropdown-select

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 3.1.1 (latest) — 2019-05-23
- 3.1.0 — 2018-02-12
- 3.0.4 — 2017-12-29
- 3.0.3 — 2017-12-29
- 3.0.2 — 2017-12-29
- 3.0.1 — 2017-12-29
- 3.0.0 — 2017-12-27
- 2.2.2 — 2017-12-22
- 2.2.1 — 2017-12-21
- 2.2.0 — 2017-12-21
- 2.1.1 — 2017-12-09
- 2.0.5 — 2017-12-09
- 2.1.0 — 2017-12-06
- 2.0.4 — 2017-12-03
- 2.0.3 — 2017-12-02
- … 21 more at https://npm.io/package/dropdown-select/versions

## README

# dropdown-select

> A group of dropdown select controls for React JS.

### Demo

[Live Demo:](https://ganapathy888.github.io/dropdown-select)

### Features

* Multi Select
* Async Select
* Auto Complete
* Minimal Interface
* Can Control using Keyboard
* Works with [redux-form](https://github.com/erikras/redux-form/)

### Installation

Add package using Yarn or Npm.

```sh
yarn add dropdown-select
```

```sh
npm install dropdown-select
```

### Usage

Import dropdown select controls and its styles into your component.

```js
import { Select, AsyncSelect, MultiSelect } from 'dropdown-select';
import 'dropdown-select/dist/css/dropdown-select.css';
```

Alternatively, you can import the styles from `.scss` files as follows:

```scss
@import '~dropdown-select/dist/css/dropdown-select.css';
```

**Simple Select:** (with array of string options)

```jsx
<Select
  options={['option1', 'option2', ...]}
  />
```

**Simple Select:** (with array of object options)

```jsx
options = [
  {
    label: 'label1',
    value: 'value1'
  },
  {
    label: 'label2',
    value: 'value2'
  },
]
<Select options={options} labelKey="label" valueKey="value" />
```

**Async Select:**

```jsx
<AsyncSelect fetchOptions={this.fetchOptions} />
```

**Multi Select:** (Checkboxed Options)

It accepts and returns array of options

```jsx
<MultiSelect options={[]} />
```

---

Using simple select as custom component in **redux-form**

```jsx
renderSelectField({ input, options, meta: { touched, error } }) {
  return (
    <div>
      <SimpleSelect
        {...input}
        options={options}
        labelKey="name"
        valueKey="id"
        />
      {touched && error && <span className="error">{error}</span>}
    </div>
  );
}

render() {
  const { handleSubmit } = this.props
  const options = []

  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="fieldName"
        options={options}
        component={this.renderSelectField}
        />
      <button type="submit">Submit</button>
    </form>
  );
}
```

---

### Functional Properties:

| Property     | Type                    | Default   | Description                                                                                                                   |
| ------------ | ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| autoComplete | boolean                 | true      | Enables / Disables auto complete options while typing                                                                         |
| disabled     | boolean                 | false     | To disable the select or not                                                                                                  |
| fetchOptions | function                | undefined | `Async Select` property, the control calls this function when input value changed                                             |
| labelKey     | string                  | undefined | Used to identify the option label                                                                                             |
| options      | array                   | []        | Array of strings (OR) Array of objects                                                                                        |
| onChange     | function                | undefined | Control `onChange` event handler, this function will be called with new option as parameter                                   |
| placeholder  | string / array          | string    | Input placeholder, for `Multi Select` you can pass an array with singular and plural name for items. Eg: ['Person', 'People'] |
| tabIndex     | string                  | undefined | tabIndex of the control                                                                                                       |
| value        | string / object / array | '' or []  | For `Multi` select, the default value is [] and for `Simple` and `Async` select, the default value is empty string            |
| valueKey     | string                  | undefined | Used to identify the option value                                                                                             |

### Style Properties:

| Property         | Type   | Default   | Description                                |
| ---------------- | ------ | --------- | ------------------------------------------ |
| className        | String | undefined | Overrides outer control styles             |
| inputClassName   | String | undefined | Overrides control input styles             |
| optionsClassName | String | undefined | Overrides control options container styles |
| optionClassName  | String | undefined | Overrides control option styles            |

---

### Notes on Performance:

* Use `<Select />` if options length < 200

* Use `<AsyncSelect />` if options length > 200

### Further Reading

For advanced use cases, please refer
[react-select](https://github.com/JedWatson/react-select)

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