FolderFile Tree
Folder
File Tree
File tree component for displaying hierarchical file structure.
Importimport { Folder } from "@ant-design/x"; |
Sourcex/components/folder |
Docs |
Versionsupported since 2.4.0 |
Ant Design XImportimport { Folder } from "@ant-design/x"; |
Sourcex/components/folder |
Docs |
Versionsupported since 2.4.0 |
Common props ref: Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| treeData | File tree data | FolderTreeData[] | [] | - |
| selectable | Whether to enable selection functionality | boolean | true | - |
| selectedFile | Selected file paths (controlled) | string[] | - | - |
| defaultSelectedFile | Default selected file paths | string[] | [] | - |
| onSelectedFileChange | Callback when file selection changes | (file: { path: string[]; name?: string; content?: string }) => void | - | - |
| directoryTreeWith | Directory tree width | number | string | 278 | - |
| emptyRender | Content to display when empty, set to false to hide | false | React.ReactNode | (() => React.ReactNode) | - | - |
| previewRender | Custom file preview content | React.ReactNode | ((file: { content?: string; path: string[]; title?: React.ReactNode; language: string }, info: { originNode: React.ReactNode }) => React.ReactNode) | - | - |
| expandedPaths | Array of expanded node paths (controlled) | string[] | - | - |
| defaultExpandedPaths | Array of default expanded node paths | string[] | - | - |
| defaultExpandAll | Whether to expand all nodes by default | boolean | true | - |
| onExpandedPathsChange | Callback when expand/collapse changes | (paths: string[]) => void | - | - |
| fileContentService | File content service | FileContentService | - | - |
| onFileClick | File click event | (filePath: string, content?: string) => void | - | - |
| onFolderClick | Folder click event | (folderPath: string) => void | - | - |
| directoryTitle | Directory tree title, set to false to hide | false | React.ReactNode | (() => React.ReactNode) | - | - |
| previewTitle | File preview title | string | (({ title, path, content }: { title: string; path: string[]; content: string }) => React.ReactNode) | - | - |
| directoryIcons | Custom icon configuration, set to false to hide icons | false | Record<'directory' | string, React.ReactNode | (() => React.ReactNode)> | - | - |
| contextMenu | Context menu items for right-click, supports global configuration and function form (dynamically returns menu items based on node). Function form receives node data and full path key. Can be overridden by contextMenu in FolderTreeData | MenuProps['items'] | ((node: FolderTreeData, key: string) => MenuProps['items']) | - | - |
| onRightClick | Callback when right-clicking a node | function({event, node}) | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| title | Display name | string | - | - |
| path | File path | string | - | - |
| content | File content (optional) | string | - | - |
| children | Sub-items (valid only for folder type) | FolderTreeData[] | - | - |
| contextMenu | Right-click context menu items, set to false to disable context menu for this node. Takes priority over global contextMenu. Function form receives full path key | MenuProps['items'] | false | ((key: string) => MenuProps['items']) | - | - |
File content service interface, used for dynamically loading file content.
interface FileContentService {loadFileContent(filePath: string): Promise<string>;}
Access component instance methods via ref.
const folderRef = useRef<FolderRef>(null);// Get a nodeconst node = folderRef.current?.getNode(['src', 'App.tsx']);// Rename: immutable update, returns new treeDataconst newData = folderRef.current?.updateNode(['src', 'App.tsx'], {title: 'Main.tsx',path: 'Main.tsx',});// Delete a nodeconst newData = folderRef.current?.deleteNode(['src', 'unused.ts']);// Add a child nodeconst newData = folderRef.current?.addNode(['src'], {title: 'new.ts',path: 'new.ts',content: '',});
| Method | Description | Type |
|---|---|---|
| getNode | Get node data by path | (path: string[]) => FolderTreeData | undefined |
| updateNode | Immutable update: merge partial fields into the target node, returns new treeData | (path: string[], data: Partial<FolderTreeData>) => FolderTreeData[] |
| deleteNode | Immutable update: delete the target node, returns new treeData | (path: string[]) => FolderTreeData[] |
| addNode | Immutable update: add a child node under the target folder, returns new treeData | (parentPath: string[], node: FolderTreeData) => FolderTreeData[] |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgDirectory | Background color of directory | string | rgba(0,0,0,0.04) |
Basic usage.
Custom file content service.
Controlled file selection.
Fully controlled mode.
Searchable file browser.
Custom file icons.
Context menu. Add right-click context menu to file tree nodes via contextMenu, supporting both global and per-node configuration.
