Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

react-fs-treeview

0.1.10 • Public • Published

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

Install

npm i react-fs-treeview

DownloadsWeekly Downloads

23

Version

0.1.10

License

none

Unpacked Size

149 kB

Total Files

21

Last publish

Collaborators

  • avatar