0
# TreeNode Component
1

2
The TreeNode component represents individual nodes within the tree structure, handling display, state, and user interactions for each tree item.
3

4
## Capabilities
5

6
### TreeNode Component
7

8
Individual tree node component for rendering nodes with titles, icons, checkboxes, and handling user interactions.
9

10
```typescript { .api }
11
/**
12
 * Individual tree node component
13
 * @param props - TreeNode configuration and content
14
 * @returns React tree node element
15
 */
16
declare const TreeNode: React.FC<TreeNodeProps>;
17

18
interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
19
  // Identity & Core Props
20
  /** Unique identifier for the node (passed by parent Tree) */
21
  eventKey?: Key;
22
  /** Associated data object for this node */
23
  data?: TreeDataType;
24
  
25
  // Display Content
26
  /** Node display title */
27
  title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
28
  /** Child TreeNode elements */
29
  children?: React.ReactNode;
30
  
31
  // Styling
32
  /** CSS class for the node */
33
  className?: string;
34
  /** Inline styles for the node */
35
  style?: React.CSSProperties;
36
  /** CSS class prefix */
37
  prefixCls?: string;
38
  /** HTML id attribute */
39
  id?: string;
40
  
41
  // State Props (controlled by parent Tree)
42
  /** Whether node is expanded */
43
  expanded?: boolean;
44
  /** Whether node is selected */
45
  selected?: boolean;
46
  /** Whether node checkbox is checked */
47
  checked?: boolean;
48
  /** Whether node checkbox is half-checked */
49
  halfChecked?: boolean;
50
  /** Whether node is currently loading */
51
  loading?: boolean;
52
  /** Whether node has finished loading */
53
  loaded?: boolean;
54
  /** Whether node is currently active/focused */
55
  active?: boolean;
56
  
57
  // Behavior Configuration
58
  /** Whether this is a leaf node (no children) */
59
  isLeaf?: boolean;
60
  /** Whether this node can be selected */
61
  selectable?: boolean;
62
  /** Whether this node shows a checkbox */
63
  checkable?: boolean;
64
  /** Whether this node is disabled */
65
  disabled?: boolean;
66
  /** Whether only the checkbox is disabled */
67
  disableCheckbox?: boolean;
68
  
69
  // Visual Customization
70
  /** Custom icon for this node */
71
  icon?: IconType;
72
  /** Custom expand/collapse icon for this node */
73
  switcherIcon?: IconType;
74
  
75
  // Drag & Drop State (controlled by parent Tree)
76
  /** Whether node is being dragged over */
77
  dragOver?: boolean;
78
  /** Whether drag is over the top gap */
79
  dragOverGapTop?: boolean;
80
  /** Whether drag is over the bottom gap */
81
  dragOverGapBottom?: boolean;
82
  
83
  // Internal Props (managed by Tree component)
84
  /** Position string for tree structure */
85
  pos?: string;
86
  /** DOM reference for the node element */
87
  domRef?: React.Ref<HTMLDivElement>;
88
  /** Array indicating start positions */
89
  isStart?: boolean[];
90
  /** Array indicating end positions */
91
  isEnd?: boolean[];
92
  /** Mouse move event handler */
93
  onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
94
}
95
```
96

97
**Usage Examples:**
98

99
### Basic TreeNode Usage
100

101
```typescript
102
import React from "react";
103
import Tree, { TreeNode } from "rc-tree";
104

105
const BasicTreeNodes = () => (
106
  <Tree prefixCls="rc-tree">
107
    <TreeNode key="0-0" title="Parent Node">
108
      <TreeNode key="0-0-0" title="Child Node 1" />
109
      <TreeNode key="0-0-1" title="Child Node 2" />
110
      <TreeNode key="0-0-2" title="Child Node 3" isLeaf />
111
    </TreeNode>
112
  </Tree>
113
);
114
```
115

116
### TreeNode with Custom Icons
117

118
```typescript
119
import React from "react";
120
import Tree, { TreeNode } from "rc-tree";
121

122
const IconTreeNodes = () => {
123
  const folderIcon = <span>📁</span>;
124
  const fileIcon = <span>📄</span>;
125
  
126
  return (
127
    <Tree prefixCls="rc-tree" showIcon>
128
      <TreeNode key="0-0" title="Documents" icon={folderIcon}>
129
        <TreeNode key="0-0-0" title="document.pdf" icon={fileIcon} isLeaf />
130
        <TreeNode key="0-0-1" title="image.jpg" icon={fileIcon} isLeaf />
131
      </TreeNode>
132
    </Tree>
133
  );
134
};
135
```
136

137
### TreeNode with Custom Title Renderer
138

139
```typescript
140
import React from "react";
141
import Tree, { TreeNode } from "rc-tree";
142

143
const CustomTitleTreeNodes = () => {
144
  const renderTitle = (nodeData: any) => (
145
    <span style={{ color: nodeData.important ? 'red' : 'black' }}>
146
      {nodeData.title}
147
      {nodeData.count && <span style={{ marginLeft: 8 }}>({nodeData.count})</span>}
148
    </span>
149
  );
150
  
151
  return (
152
    <Tree prefixCls="rc-tree">
153
      <TreeNode 
154
        key="0-0" 
155
        title={renderTitle({ title: "Important Folder", important: true, count: 5 })}
156
      >
157
        <TreeNode 
158
          key="0-0-0" 
159
          title={renderTitle({ title: "Regular File", important: false })} 
160
          isLeaf 
161
        />
162
      </TreeNode>
163
    </Tree>
164
  );
165
};
166
```
167

168
### TreeNode with Conditional Properties
169

170
```typescript
171
import React from "react";
172
import Tree, { TreeNode } from "rc-tree";
173

174
const ConditionalTreeNodes = () => (
175
  <Tree prefixCls="rc-tree" checkable>
176
    <TreeNode key="0-0" title="All Items">
177
      <TreeNode 
178
        key="0-0-0" 
179
        title="Selectable Item" 
180
        selectable={true}
181
      />
182
      <TreeNode 
183
        key="0-0-1" 
184
        title="Disabled Item" 
185
        disabled={true}
186
      />
187
      <TreeNode 
188
        key="0-0-2" 
189
        title="Checkbox Disabled" 
190
        disableCheckbox={true}
191
      />
192
      <TreeNode 
193
        key="0-0-3" 
194
        title="Non-checkable Item" 
195
        checkable={false}
196
      />
197
    </TreeNode>
198
  </Tree>
199
);
200
```
201

202
## Node State Properties
203

204
### Display State
205

206
```typescript { .api }
207
interface DisplayState {
208
  /** Whether node is currently expanded (shows children) */
209
  expanded?: boolean;
210
  /** Whether node is currently selected */
211
  selected?: boolean;
212
  /** Whether node is currently active/focused */
213
  active?: boolean;
214
}
215
```
216

217
### Checkbox State
218

219
```typescript { .api }
220
interface CheckboxState {
221
  /** Whether node checkbox is fully checked */
222
  checked?: boolean;
223
  /** Whether node checkbox is partially checked (indeterminate) */
224
  halfChecked?: boolean;
225
}
226
```
227

228
### Loading State
229

230
```typescript { .api }
231
interface LoadingState {
232
  /** Whether node is currently loading data */
233
  loading?: boolean;
234
  /** Whether node has completed loading */
235
  loaded?: boolean;
236
}
237
```
238

239
### Drag & Drop State
240

241
```typescript { .api }
242
interface DragDropState {
243
  /** Whether another node is being dragged over this node */
244
  dragOver?: boolean;
245
  /** Whether drag is happening over the top edge/gap */
246
  dragOverGapTop?: boolean;
247
  /** Whether drag is happening over the bottom edge/gap */
248
  dragOverGapBottom?: boolean;
249
}
250
```
251

252
## Behavior Configuration
253

254
### Node Type Configuration
255

256
```typescript { .api }
257
interface NodeBehaviorConfig {
258
  /** Mark node as leaf (cannot have children, no expand/collapse) */
259
  isLeaf?: boolean;
260
  /** Enable/disable selection for this specific node */
261
  selectable?: boolean;
262
  /** Enable/disable checkbox for this specific node */
263
  checkable?: boolean;
264
}
265
```
266

267
### Disabled States
268

269
```typescript { .api }
270
interface DisabledConfig {
271
  /** Completely disable node (no interactions) */
272
  disabled?: boolean;
273
  /** Disable only the checkbox, keep other interactions */
274
  disableCheckbox?: boolean;
275
}
276
```
277

278
## Visual Customization
279

280
### Icon Configuration
281

282
```typescript { .api }
283
interface IconConfig {
284
  /** Custom icon displayed next to the title */
285
  icon?: IconType;
286
  /** Custom icon for expand/collapse button */
287
  switcherIcon?: IconType;
288
}
289

290
type IconType = React.ReactNode | ((props: TreeNodeProps) => React.ReactNode);
291
```
292

293
### Title Customization
294

295
```typescript { .api }
296
interface TitleConfig<TreeDataType extends BasicDataNode = DataNode> {
297
  /** Node title content - can be string, React element, or render function */
298
  title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
299
}
300
```
301

302
## Internal Properties
303

304
These properties are typically managed internally by the Tree component:
305

306
```typescript { .api }
307
interface InternalProps {
308
  /** Position string representing node location in tree hierarchy */
309
  pos?: string;
310
  /** Reference to the DOM element */
311
  domRef?: React.Ref<HTMLDivElement>;
312
  /** Array indicating if this node is at start positions */
313
  isStart?: boolean[];
314
  /** Array indicating if this node is at end positions */
315
  isEnd?: boolean[];
316
  /** Mouse move event handler */
317
  onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
318
}
319
```