# nhducit-rc-select

> React Select

Latest version **8.6.4** (published 2018-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install nhducit-rc-select
pnpm add nhducit-rc-select
yarn add nhducit-rc-select
bun add nhducit-rc-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 | 8.6.4 |
| Published | 2018-12-08 |
| First published | 2018-12-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 169.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nhducit |
| Keywords | react, react-component, react-select, select |

## Links

- npm: https://www.npmjs.com/package/nhducit-rc-select
- Repository: https://github.com/react-component/select
- Homepage: http://github.com/react-component/select
- Issues: http://github.com/react-component/select/issues
- npm.io page: https://npm.io/package/nhducit-rc-select

## Dependencies (12)

- [raf](https://npm.io/package/raf.md) ^3.4.0
- [rc-menu](https://npm.io/package/rc-menu.md) ^7.3.0
- [rc-util](https://npm.io/package/rc-util.md) ^4.0.4
- [warning](https://npm.io/package/warning.md) ^4.0.2
- [classnames](https://npm.io/package/classnames.md) 2.x
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [rc-animate](https://npm.io/package/rc-animate.md) 2.x
- [rc-trigger](https://npm.io/package/rc-trigger.md) ^2.5.4
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.23.0
- [component-classes](https://npm.io/package/component-classes.md) 1.x
- [dom-scroll-into-view](https://npm.io/package/dom-scroll-into-view.md) 1.x
- [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.2

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

- 8.6.4 (latest) — 2018-12-08

## README

# rc-select
---

React Select

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-select
[travis-image]: https://img.shields.io/travis/react-component/select.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/select
[coveralls-image]: https://img.shields.io/coveralls/react-component/select.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/select?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/select.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/select
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-select

## Screenshots

<img src="https://tfsimg.alipay.com/images/T1CUBeXa0kXXXXXXXX.png" />

## Feature

* support ie9,ie9+,chrome,firefox,safari

### Keyboard

* Open select (focus input || focus and click)
* KeyDown/KeyUp/Enter to navigate menu

## install

[![rc-select](https://nodei.co/npm/rc-select.png)](https://npmjs.org/package/rc-select)

## Usage

### basic use

```js
import Select, {Option, OptGroup} from 'rc-select';

var c = (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
);
React.render(c, container);
```

## API

### Select props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|id | html id to set on the component wrapper | String | '' |
|className | additional css class of root dom node | String | '' |
|data-\* | html data attributes to set on the component wrapper | String | '' |
|prefixCls | prefix class | String | '' |
|animation | dropdown animation name. only support slide-up now | String | '' |
|transitionName | dropdown css animation name | String | '' |
|choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
|dropdownMatchSelectWidth | whether dropdown's with is same with select | bool | true |
|dropdownClassName | additional className applied to dropdown | String | - |
|dropdownStyle | additional style applied to dropdown | Object | {} |
|dropdownAlign | additional align applied to dropdown | Object | {} |
|dropdownMenuStyle | additional style applied to dropdown menu | Object | {} |
|notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
|tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? |  |
|open | control select open | bool | |
|defaultOpen | control select default open | bool | |
|placeholder | select placeholder | React Node | |
|showSearch | whether show search input in single mode | bool | true |
|showArrow | whether show arrow in single mode | bool | true |
|allowClear | whether allowClear | bool | false |
|tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
|maxTagTextLength | max tag text length to show | number | - |
|maxTagCount | max tag count to show | number | - |
|maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
|combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
|multiple | whether multiple select | bool | false |
|disabled | whether disabled select | bool | false |
|filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
|optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
|optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
|defaultValue | initial selected option(s) | String/Array<String> | - |
|value | current selected option(s) | String/Array<String>/{key:String, label:React.Node}/Array<{key, label}> | - |
|firstActiveValue | first active value when there is no value | String/Array<String> | - |
|labelInValue| whether to embed label in value, see above value type | Bool | false |
|backfill| whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
|onChange | called when select an option or input value change(combobox) | function(value, option:Option/Array<Option>) | - |
|onSearch | called when input changed | function | - |
|onBlur | called when blur | function | - |
|onFocus | called when focus | function | - |
|onPopupScroll | called when menu is scrolled | function | - |
|onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
|onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
|onInputKeyDown | called when key down on input | Function(event) | - |
|defaultActiveFirstOption | whether active first option by default | bool | true |
|getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
|getInputElement| customize input element | function(): Element | - |
|showAction| actions trigger the dropdown to show | String[]? | - |
|autoFocus| focus select after mount | Bool | - |
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
| inputIcon | specify the select arrow icon | ReactNode | - |
| clearIcon | specify the clear icon | ReactNode | - |
| removeIcon | specify the remove icon | ReactNode | - |
| menuItemSelectedIcon | specify the remove icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |
| dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
| loading | show loading icon in arrow | Boolean | false |

### Methods

| name     | description    | parameters | return      |
|----------|----------------|----------|--------------|
|focus     | focus select programmably | - | - |
|blur     | blur select programmably | - | - |

### Option props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|className | additional class to option | String | '' |
|disabled | no effect for click or keydown for this item | bool | false |
|key | if react want you to set key, then key is same as value, you can omit value | String | - |
|value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |
|title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - |


### OptGroup props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|label | group label | String/React.Element | - |
|key | - | String | - |
|value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |


## Development

```
npm install
npm start
```

## Example

http://localhost:8003/examples/

online example: http://react-component.github.io/select/examples/

## Test Case

```
npm test
```

## Coverage

```
npm run coverage
```


## License

rc-select is released under the MIT license.

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