File Explorer
A fully-featured, accessible file explorer component with syntax highlighting, image preview, search functionality, and keyboard navigation support. Perfect for showcasing code structures, documentation sites, or any hierarchical data visualization.
Installation
Install the File Explorer component using your preferred package manager.
Usage
The File Explorer component provides a comprehensive interface for browsing and viewing hierarchical file system structures with full accessibility support, performance optimizations, and extensive customization options.
File Explorer
Files
No File Selected
Select a file from the sidebar to view its contents
Discover Its Features
The File Explorer component is packed with powerful features designed to provide an exceptional user experience.
Tree Structure
Navigate through a hierarchical file system with expandable folders and files.
File Search
Quickly find files by name with an integrated search functionality.
Copy Content
Easily copy file contents to clipboard with a single click.
Syntax Highlighting
View file contents with language-specific syntax highlighting for better readability.
Image Preview
Preview images directly in the explorer with support for multiple formats.
Accessibility
Full keyboard navigation support and screen reader compatibility.
Performance Optimized
Memoized components and optimized rendering for large file structures.
Error Handling
Robust error boundaries and graceful fallbacks for better user experience.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| initialData | FolderType | defaultFileSystemData | The initial file system data structure to display |
| className | string | '' | Additional class names for the container |
| cardClassName | string | '' | Additional class names for the card components |
| title | string | 'File Explorer' | Title displayed above the file explorer |
| showTitle | boolean | true | Whether to show the title or not |
| height | string | 'calc(100vh-200px)' | Height of the file explorer component |
| fileContentHeight | string | '100%' | Height of the file content display area |
| defaultFileIcon | React.ReactNode | <FileText className="h-4 w-4 text-muted-foreground" /> | Default icon to use for all files without a custom icon |
| defaultFolderIcon | React.ReactNode | <Folder className="h-4 w-4 text-yellow-500" /> | Default icon to use for closed folders without a custom icon |
| defaultFolderOpenIcon | React.ReactNode | <FolderOpen className="h-4 w-4 text-yellow-500" /> | Default icon to use for open folders without a custom icon |
| onFileSelect | (file: FileType) => void | undefined | Callback function called when a file is selected |
| onFolderToggle | (folderId: string, isExpanded: boolean) => void | undefined | Callback function called when a folder is expanded or collapsed |
| readOnly | boolean | false | Whether the file explorer is in read-only mode |
| allowedFileTypes | string[] | undefined | Array of allowed file extensions for filtering |
| maxFileSize | number | undefined | Maximum file size in bytes for validation |
| loading | boolean | false | Whether the component is in a loading state |
| onRefresh | () => void | undefined | Callback function for the refresh button |
Advanced Usage
Explore different configurations and use cases for the File Explorer component with various project structures and interactive features.
Basic Project Structure
A simple React project with source files, package.json, and README. Perfect for showcasing small projects or tutorials.
Basic Project
Files
No File Selected
Select a file from the sidebar to view its contents
Media Files with Image Preview
Showcase a media gallery project with image preview capabilities. Images are displayed inline when selected.
Media Gallery
Files
No File Selected
Select a file from the sidebar to view its contents
Full-Stack Project Structure
Complex project structure with frontend, backend, and configuration files. Demonstrates nested folders and different file types.
Full-Stack Application
Files
No File Selected
Select a file from the sidebar to view its contents
Interactive File Selection
Handle file selection events with callbacks to integrate with your application state and perform actions when files are selected.
File Explorer
Files
No File Selected
Select a file from the sidebar to view its contents
Interactive Features:
- • Click files to select them (check console)
- • Expand/collapse folders
- • Use keyboard navigation (Tab, Enter, Space)
Loading States & Refresh
Demonstrate loading states and refresh functionality for dynamic file systems that load data asynchronously.
Dynamic File System
Files
No File Selected
Select a file from the sidebar to view its contents
Click the refresh button to simulate loading states