Skip to content
A react component that renders an expandable/collapsible filetree in an electron app when given a directory string.
JavaScript HTML
Branch: master
Clone or download
Latest commit abc31ea Jul 8, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
test added opened files to global state to reduce load time for large dire… Jul 8, 2017
.babelrc initial commit after migration May 17, 2017
.eslintignore deleted unecessary files and packages, updated version, added filetre… Jun 4, 2017
.eslintrc deleted unecessary files and packages, updated version, added filetre… Jun 4, 2017
.gitignore
.npmignore added node_modules to .npmignore Jun 4, 2017
.nvmrc
.travis.yml fixed travis.yml file Jun 4, 2017
CONTRIBUTING.md added CONTRIBTING.md file for open source Jun 19, 2017
README.md
package.json
webpack.config.js removed react-fontawesome and changed to simple base64 img tags for i… Jun 2, 2017
yarn.lock added opened files to global state to reduce load time for large dire… Jul 8, 2017

README.md

react-filetree-electron

A fully customizable file tree that expands and contracts with the click of a button!


Screenshot

React Filetree Electron Demo

Installation

  • Note: requires node version >= 6 and an npm version >= 3.
npm install react-filetree-electron

OR, if using yarn

yarn add react-filetree-electron

Use

import FileTree from 'react-filetree-electron';

Then just use it like a normal React component. Make sure to provide a string to act as the directory path. This is the only required property, but there are many optional properties. See below.

const directory = '/Users/Your-Name-Here/Directory'
<FileTree directory={directory} />

FileTree Props

All props are optional except directory.

Property Type Options [default] Description
directory string The directory that acts as the tree root.
onFileClick function A function to be performed when a user clicks a file list item (not a directory list item).
directoryTheme string ['light'], 'dark' Theme for the directory icon
fileTreeStyle object [{ fontFamily: 'sans-serif', listStyle: 'none' }] Merge or change style attributes for the overall file tree
directoryStyle object [{ marginBottom: 3 }] Merge or change style attributes for the directory list items
fileStyle object [{ marginBottom: 3 }] Merge or change style attributes for the file list items

Special Thanks

License

MIT

You can’t perform that action at this time.