CodesparkFileExplorer

CodesparkFileExplorer displays a hierarchical view of files and folders in the workspace. It supports file selection to switch the active file in the editor.

import { CodesparkFileExplorer } from '@codespark/react';

Basic Usage

<CodesparkProvider>
  <CodesparkFileExplorer />
</CodesparkProvider>

Note

CodesparkFileExplorer doesn't have its own workspace context. It must be used inside CodesparkProvider .

Features

Hierarchical display: Files and folders are displayed in a tree structure
Auto-sorting: Folders appear first, then files, both sorted alphabetically
File selection: Click a file to switch the active file in the editor
Collapsible folders: Folders can be expanded or collapsed

Props

className

CSS class name for the file explorer container.

Type	Default	Since
`string`	-	v1.0.0

< ="w-64" />

defaultOpen

Open the folder by default.

Type	Default	Since
`boolean`	`false`	v1.0.0

<  />

renderItem

Custom render function for file tree items.

Type	Default	Since
`(context: FileExplorerItemRenderContext) => ReactNode`	-	v1.0.0

<
  ={({ ,  }) => {
    return // custom file item node
  }}
/>

Types

The file tree is composed of FileTreeNode objects:

interface FileExplorerItemRenderContext {
  node: FileTreeNode;
  depth: number;
  isSelected: boolean;
  isOpen?: boolean;
}

type FileTreeNode = FileNode | FolderNode;

interface FileNode {
  type: 'file';
  name: string;      // File name (e.g., 'App.tsx')
  path: string;      // Full path (e.g., './App.tsx')
  code: string;      // File content
  language?: string; // Language for syntax highlighting
}

interface FolderNode {
  type: 'folder';
  name: string;              // Folder name
  path: string;              // Full path
  children?: FileTreeNode[]; // Child files and folders
}