Have ideas to improve npm?Join in the discussion! »

    react-fs-treeview

    0.1.11 • 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

    33

    Version

    0.1.11

    License

    none

    Unpacked Size

    149 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar