# rc-tree-select-wl

> tree-select ui component for react

Latest version **1.1.6** (published 2016-02-03) · 0 weekly downloads

## Install

```sh
npm install rc-tree-select-wl
pnpm add rc-tree-select-wl
yarn add rc-tree-select-wl
bun add rc-tree-select-wl
```

## 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 | 1.1.6 |
| Published | 2016-02-03 |
| First published | 2016-02-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hualei5280@gmail.com |
| Maintainers | welogix |
| Keywords | react, react-component, react-tree-select, tree-select |

## Links

- npm: https://www.npmjs.com/package/rc-tree-select-wl
- Repository: https://github.com/Welogix-Tech/tree-select
- Homepage: https://github.com/react-component/tree-select
- Issues: https://github.com/Welogix-Tech/tree-select/issues
- npm.io page: https://npm.io/package/rc-tree-select-wl

## Dependencies (6)

- [rc-util](https://npm.io/package/rc-util.md) ^3.1.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.1
- [rc-animate](https://npm.io/package/rc-animate.md) ^2.0.2
- [rc-tree-wl](https://npm.io/package/rc-tree-wl.md) ^1.1.0
- [rc-trigger](https://npm.io/package/rc-trigger.md) ^1.0.6
- [object-assign](https://npm.io/package/object-assign.md) ^4.0.1

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

- 1.1.6 (latest) — 2016-02-03
- 1.1.5 — 2016-02-03

## README

# rc-tree-select
---

React TreeSelect Component


[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[![Sauce Test Status](https://saucelabs.com/buildstatus/rc-tree-select)](https://saucelabs.com/u/rc-tree-select)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-tree-select.svg)](https://saucelabs.com/u/rc-tree-select)

[npm-image]: http://img.shields.io/npm/v/rc-tree-select.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-tree-select
[travis-image]: https://img.shields.io/travis/react-component/tree-select.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/tree-select
[coveralls-image]: https://img.shields.io/coveralls/react-component/tree-select.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/tree-select?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/tree-select.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/tree-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-tree-select.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-tree-select


## Browser Support

|![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
| --- | --- | --- | --- | --- |
| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

## Screenshots

<img src="https://os.alipayobjects.com/rmsportal/HUhyhmpWyiGKnZF.png" width="288"/>


## Development

```
npm install
npm start
```

## Example

http://localhost:8000/examples/


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


## Feature

* support ie8,ie8+,chrome,firefox,safari

### Keyboard


## install


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


## Usage

see examples

## API

### TreeSelect props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|className | additional css class of root dom node | 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 | {} |
|notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
|showSearch | whether show search input 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 | - |
|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 |
|defaultValue | initial selected option(s) | String/Array<String> | - |
|value | current selected option(s) | String/Array<String> | - |
|onChange | called when select treeNode or input value change(combobox) | function(value, label) | - |
|onSelect | called when select treeNode | function(value, node) | - |
|onSearch | called when input changed | function | - |
|treeIcon | show tree icon | bool | false |
|treeLine | show tree line | bool | false |
|treeDefaultExpandAll | default expand all treeNode | bool | false |
|treeCheckable | whether tree show checkbox (select callback will not fire) | bool | false |
|filterTreeNode | filter some treeNodes as you need. it should return true | function(treeNode) | - |
|treeNodeFilterProp | which prop value of treeNode will be used for filter if filterTreeNode return true | String | 'value' |
|treeNodeLabelProp | which prop value of treeNode will render as content of select | String | 'title' |
|treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (if value is not unique of the whole array, you must provide `key` as unique id) | array<{value, label, children}> | [] |
|loadData | load data asynchronously | function(node) | - |

### TreeNode props
> note: you'd better to use `treeData` instead of using TreeNode.

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|disabled | disable treeNode | bool | false |
|key | it's value must be unique across the tree's all TreeNode, you must set it  | String | - |
|value | default as treeNodeFilterProp | String | '' |
|title | tree/subTree's title | String | '---' |
|isLeaf | whether it's leaf node | bool | false |


## Test Case

http://localhost:8000/tests/runner.html?coverage

## Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

## License
rc-tree-select is released under the MIT license.

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