rc-tree-select

What is rc-tree-select?

The rc-tree-select package is a React component for creating tree selection UI elements. It allows users to select one or multiple items from a hierarchical tree structure. It is commonly used in scenarios where a user needs to select categories, nested options, or any other items that are organized in a tree-like structure.

What are rc-tree-select's main functionalities?

Single Selection

This feature allows users to select a single item from the tree. The `treeData` prop is used to pass the hierarchical data to the component, and `treeDefaultExpandAll` expands all tree nodes by default.

import TreeSelect from 'rc-tree-select';

<TreeSelect
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  treeData={treeData}
  placeholder="Please select"
  treeDefaultExpandAll
/>

Multiple Selection

This feature enables multiple selections. The `multiple` prop indicates that multiple items can be selected.

import TreeSelect from 'rc-tree-select';

<TreeSelect
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  multiple
  treeData={treeData}
  placeholder="Please select"
  treeDefaultExpandAll
/>

Searchable Nodes

This feature adds a search input to the component, allowing users to filter tree nodes. The `showSearch` prop enables the search functionality.

import TreeSelect from 'rc-tree-select';

<TreeSelect
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  treeData={treeData}
  showSearch
  placeholder="Please select"
  treeDefaultExpandAll
/>

Asynchronous Data Loading

This feature allows for the loading of tree data asynchronously. The `loadData` prop is a function that is called to load data for a particular node when it is expanded.

import TreeSelect, { TreeNode } from 'rc-tree-select';

<TreeSelect
  loadData={onLoadData}
  treeData={treeData}
  style={{ width: 300 }}
  treeDefaultExpandAll
/>

Other packages similar to rc-tree-select

react-select

react-select is a flexible and feature-rich select input control for React. It provides a similar functionality for single and multi-value selection but does not inherently support hierarchical tree data structures like rc-tree-select.

antd

antd, or Ant Design, is a UI design language and React UI library that includes a TreeSelect component with similar functionalities to rc-tree-select. It is part of a larger framework and might be preferred if you are using other Ant Design components.

react-dropdown-tree-select

react-dropdown-tree-select is a lightweight, flexible, and customizable tree select component for React. It offers similar tree selection capabilities and can be a good alternative to rc-tree-select with additional customization options.

README

rc-tree-select

---

React TreeSelect Component

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

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

install

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	{}
dropdownPopupAlign	specify alignment for 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
maxTagTextLength	max tag text length to show	number	-
multiple	whether multiple select (true when enable treeCheckable)	bool	false
disabled	whether disabled select	bool	false
defaultValue	initial selected treeNode(s)	same as value type	-
value	current selected treeNode(s).	normal: String/Array. labelInValue: {value:String,label:React.Node}/Array<{value,label}>. treeCheckStrictly(halfChecked default false): {value:String,label:React.Node, halfChecked}/Array<{value,label,halfChecked}>.	-
labelInValue	whether to embed label in value, see above value type	Bool	false
onChange	called when select treeNode or input value change	function(value, label(null), extra)	-
onSelect	called when select treeNode	function(value, node, extra)	-
onSearch	called when input changed	function	-
showCheckedStrategy	TreeSelect.SHOW_ALL: show all checked treeNodes (Include parent treeNode). TreeSelect.SHOW_PARENT: show checked treeNodes (Just show parent treeNode). Default just show child.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD
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
treeCheckStrictly	check node precisely, parent and children nodes are not associated	bool	false
filterTreeNode	whether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's value	bool/Function(inputValue:string, treeNode:TreeNode)	Function
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/element	'---'
isLeaf	whether it's leaf node	bool	false

note

1. 大数据量下（5000个节点以上）优化建议：不要展开所有节点；一个页面不要同时存在许多个组件；不使用treeCheckable或使用treeCheckStrictly。
2. 在treeCheckable模式下，已选择节点上的x删除操作、和相应 treeNode 节点上 checkbox 的 uncheck 操作，最终效果相同，但本质不一样。前者跟弹出的 tree 组件可以“毫无关系”（例如 dropdown 没展开过，tree 也就没渲染好），而后者是 tree 组件上的节点 uncheck 事件。所以、即便两者都会触发onChange方法、但它们的参数（第三个参数）是不同的。

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.