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