Skip to main content
To display the structure of a directory with file icons and collapsible sub-directories, use the <FileTree> component. You can open or close a sub-directory by clicking on it.

​
Import

​
Usage

To display the file tree with file icons and collapsible sub-directories using the <FileTree> component, specify the structure of your files and directories inside the items property as a JavaScript list of objects and strings.

​
Specify files and placeholders

​
Add notes and comments

​
Specify folders and their state

​
<FileTree> props

Implementation: filetree.jsx The <FileTree> component accepts the following props:

​
items (required)

type: FileTreeItem[] Hierarchy of files and folders to display. The FileTreeItem can be one of the following kinds:
  • ... or … — both display a placeholder icon … indicating that a directory is expected to contain more items without specifying them all explicitly
  • any string — name of the file inside the currently described directory
  • { kind: "file", ...fields... } — an extended syntax for files, with the following fields:
    • name: string — the filename
    • note?: string — optional comment, which is displayed next to the filename
  • { kind: "folder", ...fields... } — syntax for folders and directories, with the following fields:
    • name: string — the directory name
    • note?: string — optional comment, which is displayed next to the directory name
    • open?: boolean — whether to open the directory, defaults to true
    • items: FileTreeItem[] — nested files and folders
Notice that folders are open by default, i.e., their open property is true unless specified otherwise.

​
defaultOpen

type: boolean
default: true Whether to open all folders upon the page load. Can be overridden by the open property of the FileTreeItem entry.