react-nested-file-tree
React component for presenting file-directory-tree-like structured data.
Install
Requires React 15.0.0+.
For npm-based project
npm install react-nested-file-tree --save
Or use it as individual script
Download distributiont package files in /dist/
and include them in your page.
...
Also need to alias the default export property:
const FileTree = NestedFileTreedefault;
How to use
Suppose you have an Object contains data to describe nested directory tree:
const directory = "_contents": "name": "filename_1" "path": "filename_1" "name": "filename_2" "path": "filename_2" "folder_1": "_contents": "name": "filename_1" "path": "folder_1/filename_1" "folder_2": "_contents": "folder_2_1": "_contents": "name": "filename1.md" "path": "folder_2/folder_2_1/filename1.md" "folder_2_1_1": "_contents": "name": "filename1.md" "path": "folder_2/folder_2_1/folder_2_1_1/filename1.md"
With this kind of data tructure, you can do:
import NestedFileTreeView from 'react-nested-file-tree'// basic stylesimport 'react-nested-file-tree/dist/default.css' { thisstate = selectedFile: 'some_folder/some_file' } { console this } { console } { return <NestedFileTreeView = = = = /> }
See example
folder for more examples, and online demo.
API
NestedFileTreeView
directory
Directory data object, it has to be in below nested fomat:
_contents: name: 'file_name1' path: 'file_name1' folder_name1: _contents: name: 'file_name2' path: 'folder_name1/file_name2' folder_name2: _contents: name: 'file_name3' path: 'folder_name1/folder_name2/file_name3'
Which represents a file directory:
|-- file_name1
|-- folder_name1
|-- file_name2
|-- folder_name2
|-- file_name3
maxFolderLevel
A number to limit maximum folder depth to display.
For example, given maxFolderLevel={2}
, then only 2 level of folders are rendered, if there are folders deeper than that, it would show <span class="more">...<span>
expended
All folders are collapsed by default. If given expended={true}
(true
can be omitted), then all folders would be expended until user click on it to collapse.
fileClickHandler
A callback function for file name click event handler, the file object will be passed in:
function ({name, path}) {}
folderClickHandler
A callback function for folder name click event handler, the folder name string, current folder path, and folder Object will be passed in as parameters:
function (name, currentPath, folderObj) {}
fileClassName
For passing in extra class names to the file element <li class="item">...</li>
.
folderClassName
For passing in extra class names to the folder element <li class="subFolder">...</li>
.
selectedFilePath
To sepecify a selected file by file path. With default styles, the selected file will be highlighted in blue.
selectedClassName
By default the selected file element will has class name active
, you can pass in extra class names for that.
folderTemplate
You can create your own stateless folder component folderTemplate={CustomFolder}
like this:
{ return <a onClick=onclick> <span className='icon'>other stuff</span> name </a> }
fileTemplate
Create your own stateless component file fileTemplate={CustomFile}
like this:
{ return <a> <span className='icon'>other stuff</span> propsname </a> }
Development
npm install
to install dependencynpm test
to run testsnpm run example
to run development server onlocalhost:8080
npm run build:dist
to build distribution package