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.
Additionally, you can add notes to files and directories.

​
Import

import { FileTree } from '/snippets/filetree.jsx';

​
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. 
import { FileTree } from '/snippets/filetree.jsx';

<FileTree items={[ /* ...entries, see below... */ ]} />

​
Specify files and placeholders

import { FileTree } from '/snippets/filetree.jsx';

{/* Files and a placeholder by the end */}
<FileTree
  items={[
    "file-name-1",
    "file-name-2",
    "file-name-3",
    "...", // will be rendered as a … icon
  ]}
/>

​
Add notes and comments

import { FileTree } from '/snippets/filetree.jsx';

{/* Using objects to add notes or nested folders */}
<FileTree
  items={[
    "file-name-1",
    { kind: "file", name: "file-name-2", note: "very important file" },
    {
      kind: "folder",
      name: "best-folder",
      note: "not really",
      open: false, // otherwise defaults to true
      items: ["file-name-3-within-subfolder"],
    },
  ]}
/>

​
Specify folders and their state

import { FileTree } from '/snippets/filetree.jsx';

{/* Make all sub-folders be closed by default */}
<FileTree
  items={[
    { kind: "folder", name: "folder-1", open: true, items: ["something1"] },
    { kind: "folder", name: "folder-2", items: ["something2"] },
  ]}
  defaultOpen={false} {/* otherwise defaults to true */}
/>

​
<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.
⌘I