filetree-indokudev

v1.1.1

Published

6 months ago

Custom file tree component for React

Downloads

0High
0Medium
0Low

indokudev

@filetree-indokudev/react

A powerful, customizable file tree component for React applications with VSCode-like functionality.

Features

🎯 VSCode-like Interface - Familiar file explorer experience
🎨 Theme Support - Light, dark, and auto themes with localStorage persistence
🖱️ Context Menu - Right-click or long-press (2s) for context actions
🔄 Drag & Drop - Full drag and drop support for file operations
📁 File Type Icons - Automatic icons for different file types
✏️ Inline Rename - Double-click to rename files and folders
📱 Responsive - Works on desktop and mobile devices
🔧 Highly Customizable - Easy to customize and extend
📦 TypeScript - Full TypeScript support
🚀 Lightweight - Minimal dependencies

Installation

```bash npm install @filetree-indokudev/react ```

Quick Start

```tsx import React, { useState } from 'react'; import { FileTree, FileTreeNode } from '@filetree-indokudev/react';

const data: FileTreeNode[] = [ { id: '1', name: 'src', type: 'folder', path: '/src', isExpanded: true, children: [ { id: '2', name: 'App.tsx', type: 'file', path: '/src/App.tsx', extension: 'tsx' } ] } ];

function App() { const [treeData, setTreeData] = useState(data);

return ( <FileTree data={treeData} onNodeSelect={(node) => console.log('Selected:', node)} onNodeExpand={(node) => console.log('Expanded:', node)} onNodeRename={(node, newName) => console.log('Renamed:', node, newName)} theme="auto" showIcons={true} allowDragDrop={true} allowRename={true} /> ); } ```

Props

FileTree Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | FileTreeNode[] | Required | Array of file tree nodes | | onNodeSelect | (node: FileTreeNode) => void | - | Called when a node is selected | | onNodeExpand | (node: FileTreeNode) => void | - | Called when a folder is expanded/collapsed | | onNodeRename | (node: FileTreeNode, newName: string) => void | - | Called when a node is renamed | | onNodeDelete | (node: FileTreeNode) => void | - | Called when a node is deleted | | onNodeCopy | (node: FileTreeNode) => void | - | Called when a node is copied | | onNodeCut | (node: FileTreeNode) => void | - | Called when a node is cut | | onNodePaste | (targetNode: FileTreeNode, sourceNode: FileTreeNode) => void | - | Called when a node is pasted | | onNodeDrop | (draggedNode: FileTreeNode, targetNode: FileTreeNode) => void | - | Called when a node is dropped | | onNodeProperties | (node: FileTreeNode) => void | - | Called when properties is selected | | onNodeOpenWith | (node: FileTreeNode) => void | - | Called when "open with" is selected | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Theme mode | | showIcons | boolean | true | Show file type icons | | allowDragDrop | boolean | true | Enable drag and drop | | allowRename | boolean | true | Allow renaming nodes | | allowDelete | boolean | true | Allow deleting nodes | | className | string | '' | Additional CSS classes | | customContextMenu | ContextMenuAction[] | [] | Custom context menu actions |

FileTreeNode Interface

```tsx interface FileTreeNode { id: string; name: string; type: 'file' | 'folder'; path: string; children?: FileTreeNode[]; size?: number; modified?: Date; extension?: string; isExpanded?: boolean; isSelected?: boolean; isEditing?: boolean; } ```

Context Menu Actions

The component provides these built-in context menu actions:

Rename (F2) - Rename the selected item
Cut (Ctrl+X) - Cut the selected item
Copy (Ctrl+C) - Copy the selected item
Paste (Ctrl+V) - Paste the copied/cut item
Delete (Del) - Delete the selected item
Open with... - Open with external application
Properties (Alt+Enter) - Show item properties

Supported File Types

The component automatically detects and displays appropriate icons for:

JavaScript/TypeScript: .js, .jsx, .ts, .tsx, .mjs
Web: .html, .css, .scss, .sass, .less
Frameworks: .vue, .svelte
Data: .json, .xml, .yaml, .yml, .toml
Images: .png, .jpg, .jpeg, .gif, .svg, .webp, .ico
Video: .mp4, .avi, .mov, .wmv, .webm
Audio: .mp3, .wav, .flac, .ogg
Archives: .zip, .rar, .7z, .tar, .gz
Documents: .pdf, .doc, .docx, .txt, .md, .rtf
And many more...

Theming

The component supports three theme modes:

light - Light theme
dark - Dark theme
auto - Automatically follows system preference

Theme preference is automatically saved to localStorage.

Customization

Custom Context Menu

```tsx const customActions: ContextMenuAction[] = [ { id: 'custom-action', label: 'Custom Action', icon: 'Star', onClick: (node) => console.log('Custom action:', node) } ];

```

Custom Styling

The component uses Tailwind CSS classes and can be customized by overriding the default styles or by passing custom className props.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme