Direactree

A React component for showing and interacting with directory structures.

Install: npm install direactree

Import: import { Direactree } from "direactree";

NOTE: For Next.js 13 and later versions:

In Next.js 13 and later versions, all components are considered Server Components by default. Since Direactree is a Client Component, you have two different usage methods:

1. Using Special Next.js Import (Recommended)

import Direactree from "direactree/next";

2. Using Default Import

"use client"

import Direactree from "direactree";

Getting Started

Direactree Features

Create Folder anywhere in the tree
Create File anywhere in the tree
Rename file or folder anywhere in the tree
Delete file or folder anywhere in the tree
Move file or folder anywhere in the tree

NOTE: Direactree guarantees the following:

Folder or file can't move to itself
Folders can't move to its children
Folders or files can't create in the file

Direactree Example Usage

This example shows the example usage of the Direactree component.

File Explorer

►Desktop

Selected Node Name: File not selected!

File content will be displayed here...

Example Usage

 Code...

Direactree Props

Direactree provides the following props:

structure

The structure prop is an object that represent the nodes in the directory tree.

Type: TreeNode

{"id": "string",
"name": "string",
"type": "folder | file",
"children": "TreeNode[]"
}

Example:

<Direactree structure={structure} />

Structure =

[{"id": "0",
"name": "C:/",
"type": "folder",
"children": [{"id": "1",
"name": "Users",
"type": "folder",
"children": [{"id": "2",
"name": "John Doe",
"type": "folder",
"children": [{"id": "3",
"name": "Documents",
"type": "folder",
"children": [{"id": "4",
"name": "sample.tsx",
"type": "file"
}
]
},
{"id": "5",
"name": "logs.txt",
"type": "file"
}
]
}
]
}
]
}
]

►C:/

onSelectedNodeChange

The onSelectedNodeChange prop is a function that is called when the user selects a node.

The function receives the selected node as an argument.

Type: (node: NodePath | null) => void

NodePath

{"name": "string",
"id": "string",
"type": "file | folder",
"parent": "NodePath | null"
}

Example:


  const [selectedNode, setSelectedNode] = useState<NodePath | null>(null);
  
  const handleSelectedNodeChange = (node: NodePath | null) => {
    setSelectedNode(node);
  };

  <Direactree structure={structure} onSelectedNodeChange={handleSelectedNodeChange} />

Try it!

-> Select a node and click on it to see the changes.

selectedNode =

"null"

►C:/

onNodeMove

The onNodeMove prop is a function that is called when the user moves a node.

The function receives the moved source node and the target node as an argument.

NOTE:

The onNodeMove prop is not called when the user moves a node to itself.
The onNodeMove prop is not called when the user moves a node to its children.
The onNodeMove prop is not called when the user moves a node to file node.

Type: (sourceNode: TreeNode, targetNode: TreeNode) => void

TreeNode

{"id": "string",
"name": "string",
"type": "folder | file",
"children": "TreeNode[]"
}

Example:


  const [sourceNode, setSourceNode] = useState<TreeNode | null>(null);
  const [targetNode, setTargetNode] = useState<TreeNode | null>(null);

  const handleNodeMove = (sourceNode: TreeNode, targetNode: TreeNode) => {
    setSourceNode(sourceNode);
    setTargetNode(targetNode);
  };

  <Direactree structure={structure} onNodeMove={handleNodeMove} />

Try it!

-> Select a node and move it to another node to see the changes.

sourceNode =

"null"

targetNode =

"null"

►C:/

onCreateFolder, onCreateFile, onRename, onDelete

The onCreateFolder prop is a function that is called when the user creates a folder in a selected node.

The onCreateFile prop is a function that is called when the user creates a file in a selected node.

The functions above receives the parent node as an argument.

The onRename prop is a function that is called when the user renames a selected node.

The onDelete prop is a function that is called when the user deletes a selectednode.

The functions above receives the selected node as an argument.

NOTE:

If the user not select any node, the function (onCreateFolder, onCreateFile) will receive null as an argument and the new node will be created at the root of the tree.

Type: (parentNode: NodePath) => void

NodePath

{"name": "string",
"id": "string",
"type": "file | folder",
"parent": "NodePath | null"
}

Example:


  const [parentNode, setParentNode] = useState<NodePath | null>(null);

  const handleCreateFolder = (parentNode: NodePath | null) => {
    setParentNode(parentNode);
  };

  const handleCreateFile = (parentNode: NodePath | null) => {
    setParentNode(parentNode);
  };

  const handleRename = (node: NodePath | null) => {
    setParentNode(node);
  };  

  const handleDelete = (node: NodePath | null) => {
    setParentNode(node);
  };

  <Direactree structure={structure} onCreateFolder={handleCreateFolder} onCreateFile={handleCreateFile} onRename={handleRename} onDelete={handleDelete} />

Try it!

-> Select a node and click on the toolbox icons to see the changes.

parentNode =

"null"

►C:/

onSave

The onSave prop is a function that is called when the user clicks on the save button on the editable area.

The function receives the save props as an argument.

Type: (saveProps: SaveProps) => void

SaveProps

{"newName": "string",
"selectedNode": "NodePath | null",
"actionType": "create | edit",
"createType": "folder | file"
}

NodePath as you know.

Example:


  const [saveProps, setSaveProps] = useState<SaveProps | null>(null);

  const handleSave = (saveProps: SaveProps | null) => {
    setSaveProps(saveProps);
  };

  <Direactree structure={structure} onSave={handleSave} />

Try it!

-> Select a node, and click on the toolbox, fill the input and click on the save button to see the changes.

saveProps =

"null"

►C:/

isAllExpanded

The isAllExpanded prop is a boolean value that determines whether all nodes are expanded for initial render.

Default value is false.

Type: boolean

Example:

<Direactree structure={structure} isAllExpanded={true} />

Try it!

isAllExpanded: true

►C:/

indent

The indent prop is the number of spaces to indent the tree.

Minimum value is 8. and maximum value is 50.

If the value is less than 8, it will be set to 8.

If the value is greater than 50, it will be set to 50.

Default value is 20.

Type: number

Example:

<Direactree structure={structure} indent={20} />

Try it!

indent: 20

►C:/

allowDragAndDrop

The allowDragAndDrop prop is a boolean value that determines whether to allow drag and drop.

Default value is true.

Type: boolean

When to use?

If the component only show the directory tree and you don't want to change the structure, you can set the allowDragAndDrop prop to false.

Example:

<Direactree structure={structure} allowDragAndDrop={true} />

Try it!

allowDragAndDrop: true

►C:/

showToolbox

The showToolbox prop is a boolean value that determines whether to show the toolbox.

Default value is true.

Type: boolean

When to use?

If the component only show the directory tree and you don't want to change the structure, you can set the showToolbox prop to false.

Example:

<Direactree structure={structure} showToolbox={true} />

Try it!

showToolbox: true

►C:/

toolboxIcons

The toolboxIcons prop is an object that determines the custom icons of the toolbox.

Type: ToolboxIcons

{"createFolder?": "React.ReactNode",
"createFile?": "React.ReactNode",
"rename?": "React.ReactNode",
"delete?": "React.ReactNode"
}

When to use?

If you want to use custom icons, you can set the toolboxIcons prop.

Example:

const toolboxIcons = {
  createFolder: <FolderAddOutlined />,
  createFile: <FileAddOutlined />,
  rename: <EditOutlined />,
  delete: <DeleteOutlined />
};

<Direactree 
  structure={structure} 
  toolboxIcons={toolboxIcons} 
/>

►C:/

toolboxSticky

The toolboxSticky prop is a boolean value that determines whether to make the toolbox sticky.

Default value is false.

Type: boolean

When to use?

If you want to make the toolbox sticky when the user scrolls, you can set the toolboxSticky prop to true.

Example:

<Direactree structure={structure} toolboxSticky={true} />

Try it!

toolboxSticky: true

►C:/