# @crpt/react-select

> react-select react component

Latest version **1.2.1** (published 2019-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @crpt/react-select
pnpm add @crpt/react-select
yarn add @crpt/react-select
bun add @crpt/react-select
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2019-07-24 |
| First published | 2018-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 369.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | dlit, embalex, fantik217, ivanvlado, solnik |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/@crpt/react-select
- Repository: https://github.com/crptteam/react-select
- Issues: https://github.com/crptteam/react-select/issues
- npm.io page: https://npm.io/package/@crpt/react-select

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [resize-observer](https://npm.io/package/resize-observer.md) ^1.0.0
- [styled-components](https://npm.io/package/styled-components.md) 1.4.6 - 3

## Recent versions

- 1.2.1 (latest) — 2019-07-24
- 1.0.0 (next) — 2018-05-31
- 1.1.15 — 2019-07-22
- 1.1.14 — 2019-07-22
- 1.1.13 — 2019-06-30
- 1.1.12 — 2019-06-30
- 1.1.11 — 2019-06-27
- 1.1.10 — 2019-06-24
- 1.1.9 — 2019-03-04
- 1.1.8 — 2019-02-28
- 1.1.7 — 2019-02-22
- 1.1.6 — 2019-02-15
- 1.1.5 — 2019-02-15
- 1.1.4 — 2019-02-15
- 1.1.3 — 2019-02-15
- … 54 more at https://npm.io/package/@crpt/react-select/versions

## README

# react-select

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

SingleSelect and MultiSelect React components.

## Install ##
```javascript
npm i --save @crpt/react-select
```

## Usage

```javascript

import { SingleSelect, MultiSelect } from "@crpt/react-select";

<SingleSelect onSelect={val => console.log(vaL)} values={[{id:1, title: "Left"}, {id:2, title: "Right"]} />
```

### SingleSelect

| PropName | Description | Example |
|---|---|---|
| values: Array (Required)  | Values. See Note1 |  `<SingleSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}]  />` |
| disabled: Boolean  | Can be disabled. |  `<SingleSelect disabled  />` |
| onSelect: Function  | Callback for select event. |  `<SingleSelect onSelect={val => console.log(val)}  />` |
| onChange: Function | Callback for change event | |
| placeholder: String  | Placeholder value. |  `<SingleSelect placeholder="Some placeholder"  />` |
| savePlaceholder: Boolean | When true, placeholder's text is placed on top if any of value is selected and in the center otherwise | |
| selectedId: Integer  | If passed, child with id = selectedId becomes selected. |  `<SingleSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}] selectedId={2}  />` |
| truncate: Boolean | Long text truncation. Select options width will not exceed input width.  | `<SingleSelect truncate values=[{id:1, title: "very looong text"}] />` |
| multiline: Boolean | Long text wrap. | `<SingleSelect multiline values=[{id:1, title: "very looong text"}] />` |
| isLoading: Boolean | If true, there is "Загрузка..." displayed on drop list | |
| RenderValues: React element or function | It is a function for rendering title to inputText. | See note 2.|
| RenderOption: React element or function | It is rendered instead of all of titles in values (working with renderValue) | |
| RenderIcon: React element or function | It is rendered instead of option selected icon | |
| onRef | Return {this of SingleSelect} in componentDidMount and undefined in componentWillUnmount| | |
| hideOptionsPanel: Boolean | If true optionList isn't shown | | |
| withoutIcon: Boolean | Seach and BottomArrow Icons are not shown when properties is true | | |
| filterDisabled: Boolean | When you are writing in text field, option list is filtered using typing text. If filterDisabled is true optionList isn't filtered | | |
| iconPosition: String | Icon position. Default: 'right' | | |
| showPointer: Boolean | Show options panel dialog pointer. Default: false | | |
| noValuesText: String | Show text if values empty | | |
| onTogglePanel: Function | Callback on toggle Options Panel | | |
| rightIconReplacer: JSX expression | replaces right icon | | |
__Note1__. Values is array of objects. You can add any properties and then use renderValue or renderOption for render them. But some properties are special.

| Property name | Property type | Property description |
|---|---|---|
| id (required) | Number | Must be unique integer |
| value (required) | String or element| Value is returned on onSelect |
| title (required) | String or element | Title is shown on the text field after the select |
| titleText | String or element | Title for textField. If undefined title field is displayed | 
| titleOption | String or element | Title for optionList. If undefined title field is displayed |
| filterString | String | If defined filter process use this properties instead of title |
| disabled | Boolean | Can't select option if disabled |


Examples of title:
- simple title:
```javscript
title: 'empty'
```

- object title:
```javscript
title: (
  <div>
    Title <b>text</b> here
  </div>)
```

__Note 2__ 
RenderOption. _Values_ item properties are passed to function using _value_ propertie. Renders function example: 
RenderValue. _Values_ item properties are passed to function using _selected_ and _value_ (it's the same) property. Renders function example: 
```javascript
const renderOption = (props) => (
  <div>
    To option field:<br/>
    <b>{props.value.prop1}</b><br/>
    <i>{props.value.prop2}</i>
  </div>
);
```

### MultiSelect

| PropName | Description | Example |
|---|---|---|
| values: Array (Required)  | Values. |  `<MultiSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}]  />` |
| disabled: Boolean  | Can be disabled. |  `<MultiSelect disabled  />` |
| onSelect: Function  | Callback for select event. |  `<MultiSelect onSelect={val => console.log(val)}  />` |
| placeholder: String  | Placeholder value. |  `<MultiSelect placeholder="Some placeholder"  />` |
| selectedIds: Array  | If passed, childs with id in selectedIds becomes selected. |  `<MultiSelect values=[{id:1, title: "value 1"}, {id: 2, title: "value 2"}] selectedIds={[1,2]}  />` |
| truncate: Boolean | Long text truncation. Select options width will not exceed input width.  | `<MultiSelect truncate values=[{id:1, title: "very looong text"}] />` |
| multiline: Boolean | Long text wrap. | `<MultiSelect multiline values=[{id:1, title: "very looong text"}] />` |
| iconPosition: String | Icon position. Default: 'right' | | |
| showPointer: Boolean | Show options panel dialog pointer. Default: false | | |
| noValuesText: String | Show text if values empty | | |
| onTogglePanel: Function | Callback on toggle Options Panel | | |


[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo

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