FileTree component

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.