FolderView

---

FolderView accepts data prop and displays a folder tree. The data should be structured as below.

Syntax

[
  {
    parent: "parent_name",
    children: [
      {
        parent: "parent_name",
      },
      {
        parent: "parent_name",
        children: [
          {
            parent: "parent_name",
          },
        ],
      },
    ],
  },
  {
    parent: "parent_name",
  },
];

Example

Data

const data = [
  {
    parent: "public",
    children: [
      {
        parent: "index.html",
      },
    ],
  },
  {
    parent: "src",
    children: [
      {
        parent: "App.css",
      },
      {
        parent: "App.tsx",
      },
      {
        parent: "components",
        children: [
          {
            parent: "Dashboard.tsx",
          },
        ],
      },
      {
        parent: "index.tsx",
      },
    ],
  },
  {
    parent: "package.json",
  },
];

Callback

FolderView returns flagr and spread via callback for manipulation.

const callback = (ret) => {
  console.log(ret);
};

Component

Now lets make use of above data and callback function as follows.

<FolderView data={data} callback={callback} />

Output

▷

public

▷

src

package.json

Props

name	type	mandatory	description
data	JSON	yes	data to print tree
callback	function	yes	returns flagr and spread
theme	object	no	accepts bg, fg, size as an object to customize background, color and fontSize respectively
width	string	no	width of view
height	string	no	height of view
shadow	boolean	no	boxShadow of view