0
# rc-tree-select
1
2
rc-tree-select is a comprehensive React tree-select component that enables users to select values from hierarchical tree structures through an intuitive dropdown interface. It offers extensive customization options including single and multiple selection modes, checkable tree nodes, search functionality with filtering, asynchronous data loading, and virtual scrolling for performance optimization with large datasets.
3
4
## Package Information
5
6
- **Package Name**: rc-tree-select
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install rc-tree-select`
10
11
## Core Imports
12
13
```typescript
14
import TreeSelect, { TreeNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from "rc-tree-select";
15
import type { TreeSelectProps } from "rc-tree-select";
16
```
17
18
For CommonJS:
19
20
```javascript
21
const TreeSelect = require("rc-tree-select");
22
const { TreeNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } = require("rc-tree-select");
23
```
24
25
## Basic Usage
26
27
```typescript
28
import TreeSelect, { TreeNode } from "rc-tree-select";
29
// Import CSS styles (required for proper styling)
30
import "rc-tree-select/assets/index.css";
31
32
// Simple tree data
33
const treeData = [
34
{
35
key: "0-0",
36
value: "0-0",
37
title: "Node 0-0",
38
children: [
39
{ key: "0-0-0", value: "0-0-0", title: "Node 0-0-0" },
40
{ key: "0-0-1", value: "0-0-1", title: "Node 0-0-1" },
41
],
42
},
43
{
44
key: "0-1",
45
value: "0-1",
46
title: "Node 0-1",
47
},
48
];
49
50
// Basic usage
51
function MyComponent() {
52
const [value, setValue] = useState();
53
54
return (
55
<TreeSelect
56
style={{ width: '100%' }}
57
value={value}
58
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
59
treeData={treeData}
60
placeholder="Please select"
61
treeDefaultExpandAll
62
onChange={setValue}
63
/>
64
);
65
}
66
```
67
68
## Architecture
69
70
rc-tree-select is built on several key components:
71
72
- **TreeSelect Component**: Main component providing the dropdown interface and tree functionality
73
- **TreeNode Component**: Declarative component for defining tree structure using JSX
74
- **Selection Strategies**: Constants controlling how selected values are displayed (`SHOW_ALL`, `SHOW_PARENT`, `SHOW_CHILD`)
75
- **Data Management**: Hooks and utilities for managing tree data, entities, and selection state
76
- **Virtual Scrolling**: Performance optimization for large datasets using rc-virtual-list
77
- **Base Select Integration**: Built on rc-select for core dropdown functionality
78
79
## Capabilities
80
81
### Core TreeSelect Component
82
83
The main TreeSelect component with comprehensive configuration options for single/multiple selection, checkable nodes, search functionality, async loading, and tree display customization.
84
85
```typescript { .api }
86
interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> {
87
// Value management
88
value?: ValueType;
89
defaultValue?: ValueType;
90
onChange?: (value: ValueType, labelList: React.ReactNode[], extra: ChangeEventExtra) => void;
91
92
// Selection configuration
93
multiple?: boolean;
94
treeCheckable?: boolean | React.ReactNode;
95
maxCount?: number;
96
97
// Data source
98
treeData?: OptionType[];
99
children?: React.ReactNode;
100
101
// Tree display
102
treeDefaultExpandAll?: boolean;
103
treeLine?: boolean;
104
showTreeIcon?: boolean;
105
106
// Search functionality
107
searchValue?: string;
108
autoClearSearchValue?: boolean;
109
filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
110
111
// Performance
112
virtual?: boolean;
113
listHeight?: number;
114
115
// Styling
116
prefixCls?: string;
117
className?: string;
118
}
119
```
120
121
[Core TreeSelect Component](./tree-select-component.md)
122
123
### TreeNode Component
124
125
Declarative JSX component for defining tree structure with children, useful for static tree data that can be expressed in JSX form.
126
127
```typescript { .api }
128
interface TreeNodeProps extends DataNode {
129
value: Key;
130
children?: React.ReactNode;
131
}
132
```
133
134
[TreeNode Component](./tree-node-component.md)
135
136
### Selection Strategies
137
138
Constants that control how selected values are displayed when using checkable trees in multiple selection mode.
139
140
```typescript { .api }
141
const SHOW_ALL: CheckedStrategy;
142
const SHOW_PARENT: CheckedStrategy;
143
const SHOW_CHILD: CheckedStrategy;
144
```
145
146
[Selection Strategies](./selection-strategies.md)
147
148
### Data Management
149
150
Utility functions and hooks for managing tree data structures, field name mapping, value formatting, and selection state.
151
152
```typescript { .api }
153
// Core data types
154
interface DataNode extends Record<string, any> {
155
key?: Key;
156
value?: SafeKey;
157
title?: React.ReactNode;
158
children?: DataNode[];
159
disabled?: boolean;
160
disableCheckbox?: boolean;
161
checkable?: boolean;
162
isLeaf?: boolean;
163
}
164
165
type SafeKey = string | number;
166
type Key = string | number | null;
167
```
168
169
[Data Management](./data-management.md)
170
171
## Types
172
173
```typescript { .api }
174
// Selection strategy type
175
type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
176
177
// Value types for labelInValue mode
178
interface LabeledValueType {
179
key?: Key;
180
value?: SafeKey;
181
label?: React.ReactNode;
182
halfChecked?: boolean;
183
}
184
185
// Event information
186
interface ChangeEventExtra {
187
preValue: SafeKey[];
188
triggerValue: SafeKey;
189
triggerNode: DataNode;
190
selected?: boolean;
191
checked?: boolean;
192
}
193
194
// Field name mapping for custom data structures
195
interface FieldNames {
196
label?: string;
197
value?: string;
198
children?: string;
199
}
200
201
// Simple mode configuration for flat data
202
interface SimpleModeConfig {
203
id?: string;
204
pId?: string;
205
rootPId?: string;
206
}
207
```