Package Exports
- rc-tree-select
- rc-tree-select/assets/index.css
- rc-tree-select/lib/SelectTrigger
- rc-tree-select/lib/TreeNode
- rc-tree-select/lib/util
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-tree-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-tree-select
React TreeSelect Component
Browser Support
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots

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
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 |
- |
value | current selected option(s) | String/Array |
- |
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
License
rc-tree-select is released under the MIT license.