# react-basic-select

> Just another Select component for React

Latest version **0.3.5** (published 2021-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-basic-select
pnpm add react-basic-select
yarn add react-basic-select
bun add react-basic-select
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2021-05-15 |
| First published | 2021-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 38.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yiğit Levent |
| Maintainers | yigitlevent |
| Keywords | react, typescript, npm, select, select-search, multi-select, react-select, fuse.js |

## Links

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

## Dependencies (1)

- [fuse.js](https://npm.io/package/fuse.js.md) ^6.4.6

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

- 0.3.5 (latest) — 2021-05-15
- 0.3.3 — 2021-05-12
- 0.3.1 — 2021-05-12
- 0.3.0 — 2021-05-12
- 0.2.4 — 2021-04-27
- 0.2.3 — 2021-04-27
- 0.1.8 — 2021-04-22
- 0.1.7 — 2021-04-21
- 0.1.6 — 2021-04-21
- 0.1.5 — 2021-04-21
- 0.1.4 — 2021-04-21
- 0.1.3 — 2021-04-21
- 0.1.2 — 2021-04-21
- 0.1.1 — 2021-04-20
- 0.1.0 — 2021-04-20

## README

# react-basic-select

Just another select component for React. Created for [Autarkis](https://github.com/yigitlevent/autarkis).

[Demo](https://codesandbox.io/s/react-basic-select-33mt5)

## Why?

Because I needed a small, mostly dependency-free Select component for my project. Figured people may use it as well.

## CSS?

You can find an example CSS implementation in `dist/example.css`, which lists all classes used in this package.

## Installation

`npm install react-basic-select`

## Basic Usage

```
const options = ["Option 1", "Option 2", "Option 3"];

<Select	options=[options]/>
```

## Props

| prop                   | type                              | default     | description                                              |
| ---------------------- | --------------------------------- | ----------- | -------------------------------------------------------- |
| **options**            | `string[] \| Option[] \| Group[]` | `n/a`       | Array of either `string`, or `Option` or `Group` objects |
| **multi?**             | `boolean`                         | `undefined` | Allow multiple selections                                |
| **search?**            | `boolean`                         | `undefined` | Allow option search via input value                      |
| **disabled?**          | `boolean`                         | `undefined` | Close option dropdown after selecting an option          |
| **closeOnSelect?**     | `boolean`                         | `undefined` | Close option dropdown after selecting an option          |
| **appendGroupValue?**  | `boolean`                         | `undefined` | Prepends the `group.value` to `option.value`             |
| **showAsText?**        | `boolean`                         | `undefined` | Shows the selected options as a string                   |
| **create?**            | `boolean`                         | `undefined` | Allow user created options                               |
| **createString?**      | `string`                          | `"Create:"` | Prefix text for user created option                      |
| **placeholder?**       | `string`                          | `undefined` | Placeholder text for `input`                             |
| **defaultSelected?**   | `string[] \| Option[] \| Group[]` | `undefined` | Selects value(s) when the Select element is rendered     |
| **searchSensitivity?** | `number` (0.0 to 1.0)             | `undefined` | Search matching sensitivity                              |
| **onOptionSelect?**    | `(value: Option) => void`         | `undefined` | Option Select callback                                   |
| **onSelectedChange?**  | `(values: Option[]) => void`      | `undefined` | Selected value(s) callback                               |
| **onInputChange?**     | `(values: string) => void`        | `undefined` | Input value callback                                     |

## Prop Considerations

-   If both `search` and `create` are false, instead of an `input`, you get a `div` to display the options list.
-   `onOptionSelect` calls the given callback **before** the value is processed, and `onSelectedChange` calls its callback afterwards.
-   `onInputChange` callback is only called if you have either `search` or `create`, or both. It is called after all the filtering and such is done.
-   If `showAsText` is set, users won't be able to remove selected options via clicking on them.

## Options Types

```
cosnt stringArray = ["Option 1", "Option 2"]
```

```
cosnt optionArray = [
  { name: "Option 1", value: "option_1" },
  { name: "Option 2", value: "option_2" }
]
```

```
cosnt groupArray = [
  { name: "Group 1", value: "group_1"
    options: [
      { name: "Option 1", value: "option_1" },
      { name: "Option 2", value: "option_2" }
    ]
  },
  { name: "Group 2", value: "group_2"
    options: [
      { name: "Option 3", value: "option_3" },
      { name: "Option 4", value: "option_4" }
    ]
  },
]
```

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