react-ts-file-tree

Description

• File-Tree Built in React-TypeScript and TailwindCSS.

Features

• Type safe components.
• Reusable components for ui.
• Reusable custom hooks for event-handling.
• Very optimized rendering for performance of File-Tree's list with Pub-Sub Modal based State-Management just using the React-Ref Bases Context.
• Event-Delegation modal of managing the all of click handling of tree-node for less memory usage.
• CRUD operations.
• React-Portal to render the inputs at particular focused node for updating and creating the node or filename
• Delete focused node with Delete key from keyboard.
• Context Menu for managing all of the file operations like rename, delete, new file and new folder etc.
• Validations for empty value or duplicate entry while creating or updating the node name.
• Collapse/Expand feature for folders

💻 Tech Stack:

Demo Video

demo.mp4

Getting Started

Install pnpm

npm i -g pnpm

Install All of the dependencies

pnpm install

Start Development Server

pnpm dev

That's it, open up the browser and type http://localhost:5173/react-ts-file-tree/ in the url.