Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/in-ch/react-file-folder
Easily and powerfully implement treeview UI in react.
https://github.com/in-ch/react-file-folder
file-tree folder folder-viewer npm npm-module react reactjs treeview
Last synced: about 8 hours ago
JSON representation
Easily and powerfully implement treeview UI in react.
- Host: GitHub
- URL: https://github.com/in-ch/react-file-folder
- Owner: in-ch
- License: mit
- Created: 2023-07-06T12:44:13.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-17T14:12:34.000Z (10 months ago)
- Last Synced: 2025-01-03T14:12:03.704Z (7 days ago)
- Topics: file-tree, folder, folder-viewer, npm, npm-module, react, reactjs, treeview
- Language: HTML
- Homepage: https://in-ch.github.io/react-file-folder
- Size: 5.11 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-toggle-file-tree
The `react-toggle-file-tree` is designed to display a file/folder structure based on the provided list of files and their properties.
This component organizes the files into folders and subfolders based on their localPath. Each folder can contain multiple files with their respective fileName
## Document
---
- [Installation](#installation)
- [How to use](#how-to-use)
- [Demos](#demos)
- [Supported file types](#supported-file-types)
- [Contribute](#contribute)
## Installation
---
This library use `react-toggle-file-tree`, so you need to install it.
```bash
npm install --save react-toggle-file-tree
```
or
```bash
yarn add react-toggle-file-tree
```
## How to use
---
```tsx
import {
createFileTree,
Directory,
ToggleFileTree,
} from 'react-toggle-file-tree';
```
⚠ The list must contain the localPath and fileName keys.
list example view
```ts
const list = [
{
localPath: '/',
fileName: 'inch.txt',
properties: {
size: '1 bit',
anything: 'possible',
a: 'b',
},
},
{
localPath: '/fruit',
fileName: 'apple.docs',
properties: {
sizezz: '12mb',
azvv: 'asdfasd',
},
},
{
localPath: '/fruit',
fileName: 'banana.png',
properties: {
sizezz: '12mb',
azvv: 'asdfasd',
},
},
{
localPath: '/vehicle/car',
fileName: 'truck.pdf',
properties: {
sizezz: '12mb',
azvv: 'asdfasd',
},
},
{
localPath: '/vehicle/car',
fileName: 'taxi.ppt',
properties: {
sizezz: '12mb',
azvv: 'asdfasd',
},
},
{
localPath: '/plant/tree',
fileName: 'oak.json',
properties: {
sizezz: '10mb',
azvv: 'asdfasd',
},
},
{
localPath: '/plant/tree',
fileName: 'maple.zip',
properties: {
sizezz: '8mb',
azvv: 'asdfasd',
},
},
{
localPath: '/plant/flower',
fileName: 'cherry-blossom.numbers',
properties: {
sizezz: '5mb',
azvv: 'asdfasd',
},
},
{
localPath: '/plant/fruit',
fileName: 'apple-tree.csv',
properties: {
sizezz: '15mb',
azvv: 'asdfasd',
},
},
];
```
## Demos
---
## Supported file types
---
The `react-toggle-file-tree` supports the following file formats:
Documents: csv, docs, html, json, manifest, numbers, pdf, ppt, pptx, txt, xlsx
Images: gif, jpg, jpeg, png
Media: mov, mp4
Scripts: js, ts
Compressed: gif, zip
## Example code
---
You can see the example code and demo.
Clone the repository
```bash
git clone https://github.com/in-ch/react-file-folder.git
```
Install libraries
```bash
cd example
```
and
```bash
npm install
```
or
```bash
yarn
```
## Contribute
---
You can follow below to contribute `react-toggle-file-tree`
Clone the repository.
```bash
git clone https://github.com/in-ch/react-file-folder.git
```