File explorer

Browse a directory tree.

src

app.tsx

package.json

View code

import { FileExplorer } from "@stack/ui/file-explorer";

export default function Example() {
  return (
    <FileExplorer
      directories={{
        "": {
          entries: [
            { path: "src", name: "src", kind: "directory" },
            { path: "package.json", name: "package.json", kind: "file" },
          ],
        },
        src: {
          entries: [{ path: "src/app.tsx", name: "app.tsx", kind: "file" }],
        },
      }}
      defaultExpandedPaths={["src"]}
    />
  );
}

Usage

import { FileExplorer } from "@stack/ui/file-explorer";

Use onLoadDirectory to fetch children as folders open. Keep loading and error states in the directory data.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

FileExplorer

Prop	Type	Required	Description
scope	string	No	Change when paths refer to a different workspace.
directories	Record<string, FileExplorerDirectory | undefined>	Yes	Directory data keyed by path; the empty path identifies the root.
changesOnly	boolean	No	Show entries with a status and ancestors of changed entries in supplied directories.
selectedPath	string | null	No	Current controlled selection.
defaultSelectedPath	string | null	No	Initial uncontrolled selection.
onSelectedPathChange	((path: string | null, entry: FileExplorerEntry | null) => void)	No	Handle selection changes.
expandedPaths	string[]	No	Current controlled expanded directory paths.
defaultExpandedPaths	string[]	No	Initially expanded directory paths.
onExpandedPathsChange	((paths: string[]) => void)	No	Handle expanded directory changes.
onLoadDirectory	((path: string) => void)	No	Called when a folder is opened or retried; the consumer owns loading and cancellation.
label	string	No	Accessible or displayed label for the control.
className	string	No	Additional CSS classes for the underlying element.