https://github.com/ashish-simplecoder/react-ts-file-tree

File tree built in React-Typescript and TailwindCSS
https://github.com/ashish-simplecoder/react-ts-file-tree

file-tree react state-management typescript vite

Last synced: about 24 hours ago
JSON representation

File tree built in React-Typescript and TailwindCSS

• Host: GitHub
• URL: https://github.com/ashish-simplecoder/react-ts-file-tree
• Owner: Ashish-simpleCoder
• Created: 2023-06-23T15:31:11.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-04T10:50:40.000Z (9 months ago)
• Last Synced: 2024-03-04T12:04:24.961Z (9 months ago)
• Topics: file-tree, react, state-management, typescript, vite
• Language: TypeScript
• Homepage: https://ashish-simplecoder.github.io/react-ts-file-tree/
• Size: 671 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# 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:

![Typescript](https://img.shields.io/badge/typescript-%23323330.svg?style=for-the-badge&logo=typescript&logoColor=%3178c6)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![TailwindCSS](https://img.shields.io/badge/tailwind-%231572B6.svg?style=for-the-badge&logo=tailwindcss3&logoColor=white)

![gh-pages](https://img.shields.io/badge/github%20pages-purple.svg?style=for-the-badge&logo=GitHub&logoColor=white)

![pnpm](https://img.shields.io/badge/pnpm-black.svg?style=for-the-badge&logo=Pnpm&logoColor=yellow)

### Demo Video

https://github.com/Ashish-simpleCoder/react-ts-file-tree/assets/62009244/1d588c6f-6033-4559-a8dd-cb6ad1b37044

## Getting Started

Install pnpm

```js

npm i -g pnpm

````

Install All of the dependencies

```js

pnpm install

```

Start Development Server

```bash

pnpm dev

```

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