A versatile and customizable react treeview library. It supports:
- ✅ customize icons
- ✅ customize event handlers
- ✅ inline add, modify, and delete tree nodes
- ✅ checkbox with half check (indeterminate check)
live demos and code examples can be found here
$ yarn add react-folder-tree $ npm install react-folder-tree --saveimport FolderTree, { testData } from 'react-folder-tree'; const BasicTree = () => { const onTreeStateChange = state => console.log('tree state: ', state); return ( <FolderTree data={ testData } onChange={ onTreeStateChange } /> ); };tree state is an object that looks like:
{ // reserved keys name: 'Goku', checked (optional): 0 (unchecked, default) | 0.5 (half checked) | 1(checked), isOpen (optional): false (default) | true, children (optional): [array of treenode], // not reserved key1 (optional): 'what ever data you need', url (optional): 'url of this node for example', }This example shows how to render a tree with custom initial state
const treeState = { name: 'root [half checked and opened]', checked: 0.5, // half check: some children are checked isOpen: true, // this folder is opened, we can see it's children children: [ { name: 'children 1 [not checked]', checked: 0 }, { name: 'children 2 [half checked and not opened]', checked: 0.5, isOpen: false, children: [ { name: 'children 2-1 [not checked]', checked: 0 }, { name: 'children 2-2 [checked]', checked: 1 }, ], }, ], }; const CustomInitState = () => ( <FolderTree data={ treeState } initCheckedStatus='custom' // default: 0 [unchecked] initOpenStatus='custom' // default: 'open' /> );<FolderTree data={ treeState } showCheckbox={ false } // default: true /><FolderTree data={ treeState } indentPixels={ 99999 } // default: 30 />In order to perform more complex operations, we can sync and keep track of the current tree state outside.
This example shows how to download all selected files.
const SuperApp = () => { const [treeState, setTreeState] = useState(initState); const onTreeStateChange = state => setTreeState(state); const onDownload = () => downloadAllSelected(treeState); return ( <> <FolderTree data={ initState } onChange={ onTreeStateChange } /> <DownloadButton onClick={ onDownload } /> </> ); };There are 9 icons and all of them are customizable.
- FileIcon
- FolderIcon
- FolderOpenIcon
- EditIcon
- DeleteIcon
- CancelIcon
- CaretRightIcon
- CaretDownIcon
- OKIcon
This example shows how to customize the FileIcon (same interface for all other icons).
import { FaBitcoin } from 'react-icons/fa'; const BitcoinApp = () => { const FileIcon = ({ onClick: defaultOnClick, nodeData }) => { const { path, name, checked, isOpen, ...restData } = nodeData; // custom event handler const handleClick = () => { doSthBad({ path, name, checked, isOpen, ...restData }); defaultOnClick(); }; // custom Style return <FaBitcoin onClick={ handleClick } />; }; return ( <FolderTree data={ initState } iconComponents={{ FileIcon, /* other custom icons ... */ }} /> ); };This usage is a subset of custom icons. For example, to hide FileIcon we can simply pass in a dummy custom icon, so nothing will be rendered.
const FileIcon = (...args) => null;This example shows how to download the file when click on the node name.
const dataWithUrl = { name: 'secret crypto file', url: 'polkadot.network', // wew can provide any custom data to the FolderTree! // ... }; const onNameClick = (defaultOnClick, nodeData) => { defaultOnClick(); const { // internal data path, name, checked, isOpen, // custom data url, ...whateverRest } = nodeData; download(url); }; const Downloader = () => ( <FolderTree data={ dataWithUrl } onNameClick={ onNameClick } /> );| prop | description | type | options |
|---|---|---|---|
| data | initial tree state data (required) | object | N/A |
| onChange | callback when tree state changes | function | console.log (default) |
| initCheckedStatus | initial check status of all nodes | string | 'unchecked' (default) | 'checked' | 'custom' |
| initOpenStatus | initial open status of all treenodes | string | 'open' (default) | 'close' | 'custom' |
| iconComponents | custom icon components | object | ant design icons (default) |
| indentPixels | ident pixels of 1x level treenode | number | 30 (default) |
| showCheckbox | show check box? | bool | true (default) |
| onNameClick | callback when click treenode name | function | open treenode inline toolbox (default) |
Feel free to open an issue, or create a pull request!
