FileTree
An interactive, nested directory tree view.
FileTree displays a hierarchical list of files and directories, similar to standard code editors. It supports deep nesting, collapsing/expanding directories via Space/Arrows, and a constrained viewport for large file trees.
Usage
import { FileTree } from 'caret-tui';
const nodes = [
{ name: 'src', type: 'directory', children: [
{ name: 'index.ts', type: 'file' },
{ name: 'utils.ts', type: 'file' }
]},
{ name: 'package.json', type: 'file' }
];
const App = () => (
<FileTree
nodes={nodes}
onSelect={(node) => console.log('Selected:', node.name)}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | FileNode[] | - | The hierarchical data structure to render. |
onSelect | (node: FileNode) => void | - | Callback fired when a file or directory is selected with Enter. |
isActive | boolean | true | When false, disables keyboard interaction. |
visibleCount | number | 15 | The maximum number of nodes visible in the viewport at once. |
Node Definition (FileNode)
| Field | Type | Description |
|---|---|---|
name | string | The display name of the node. |
type | 'file' | 'directory' | The type of the node. |
children | FileNode[] | An array of child nodes (applicable if type is 'directory'). |