Skip to content
Converts a folder and its subfolders and files to a treeview structure
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
public
src
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

React FileSystem Treeview (react-fs-treeview)

Specify a path of a directory on your machine and this component will render a treeview of the path including its child files/folders. This component uses lazy loading of the children hence making it blazing fast.

npm GitHub issues GitHub pull requests HitCount

Features

  • Deep nesting of folders till nth level.
  • Lazy loading of child nodes.
  • Bookmark a file.
  • Search for a filename.
  • Rename a node.
  • Delete a node
  • Drag/Drop a node to another folder.
  • Resizable frame.

Screenshot

Screenshot

Youtube Screencast

Screencast

Install

npm i react-fs-treeview

Import the modal.

import Tree from "react-fs-treeview";

Usage

<Tree
  className="class1 class2 class3"
  basePath="/var/www/html"
  disableContextMenu={false}
  onItemSelected={selectedItem => console.log(selectedItem)}
/>

Note: For actions like listing of trees, Rename, Delete, Moving items, it is required to run the treeview server. The server code can be found at: ./dist/server/server.js. Incase if you wish to run the server on the non-default host or port i.e. http://localhost:5000, set an env variable fsTreeViewUrl and set its value to the server url.

Props

basePath : (string) Path of the folder.

className : (object) CSS class(es) that you would like to apply to the treeview

disableContextMenu : (boolean) If true will show the options (Rename, Delete and Bookmark) when right clicked on a file/directory. Defaults to false.

onItemSelected : (callback) function called when a file/folder is clicked

You can’t perform that action at this time.