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
• How to use
• Demos
• Supported file types
• Contribute

Installation

This library use react-toggle-file-tree, so you need to install it.

npm install --save react-toggle-file-tree

or

yarn add react-toggle-file-tree

How to use

import {
  createFileTree,
  Directory,
  ToggleFileTree,
} from 'react-toggle-file-tree';

<ToggleFileTree
    list={createFileTree(list) as Directory}
    handleFileClick={handleFileClick}
    handleDirectoryClick={handleDirectoryClick}
/>

⚠ The list must contain the localPath and fileName keys.

 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

git clone https://github.com/in-ch/react-file-folder.git

Install libraries

cd example

and

npm install

or

yarn

Contribute

You can follow below to contribute react-toggle-file-tree

Clone the repository.

git clone https://github.com/in-ch/react-file-folder.git