Folder Tree Component

This project was bootstrapped with Create React App.

User can render a Folder tree component on the screen by editing json in a specific format.

Feature

•  Folder is foldable
•  Format of JSON

Folder is foldable

User can show contains inside folder by click the folder, and hide all contains by click a again.

Format of JSON

User can render a Folder tree component on the screen by editing ../src/data/basicTree.json.

Basic Structure of basicTree.JSON is an array.Inside this array, user can layout any number of Folder and File.

[{Folder},{Folder},......,{File},{File},.....]

Format of Folder

•  Fixed condition
• "icon" : Please give it a "folder" for rendering icon of folder that provide by Font Awesome.
• "type" : Please set it as "Folder".
•  Variable condition
• "id" : User can give an unique id to each folder whatever the string is.
• "label" : User can give an name to each folder whatever the string is, it will show on screen.
• "color" : User can set color of icon, or just show default color(black).
• "child" : A "Folder" can contain any number of Folder and File, set it as an array.

//Example of "Folder" object format

{
    "id": "v-OOyNYe8R",
    "icon": "folder",
    "label": "public",
    "color": "",
    "type": "Folder",
    "child": [{Folder},......,{File},.....]
}

Format of File

•  Fixed condition
• "type" : Please set it as "File".
•  Variable condition
• "id" : User can give an unique id to each folder whatever the string is.
• "icon" : User can set icon of icon Font Awesome.
• "label" : User can give an name to each folder whatever the string is, it will show on screen.
• "color" : User can set color of icon, or just show default color(black).
• "fileExtension" : User can set file extension showed on screen, default value is empty.

//Example of "File" object format

{
    "id": "nKXz5hxEDI",
    "icon": "fa-brands fa-js",
    "label": "index",
    "color": "",
    "type": "File",
    "fileExtension":"js"
}

Icon

User can set icon of file whatever they want. Please check icon code on Font Awesome.

Available Icon List:

•  Folder : "folder"
•  Folder : "fa-folder-open"
•  JavaScript : "fa-brands fa-js"
•  HTML5 : "fa-brands fa-html5"
•  CSS3 : "fa-brands fa-css3-alt"
•  File : "fa-file","fa-file-code"

If icon code do not work, please edit App.js as following code:

//App.js Line 6

import {
  import {
  faFolder,
  faFolderOpen,
  faFile,
  faFileCode,
  faFileImage,
// import icon you want here:
  "addIcon"
} from "@fortawesome/free-solid-svg-icons";
} from "@fortawesome/free-solid-svg-icons";

//Line 14

//add icon you import into this function
library.add(fab, faFolder, faFolderOpen, faFile, faFileCode, faFileImage, "addIcon");

[repo] [Medium]