react-collapsible-tree
Creates a React Tree View from JSON Data.
Displays a Folder Open Icon and Folder Normal Icon according to state, as well as a File Icon.
For full explanation, look at the example in examples/normal-tree
.
Install:
npm install react-collapsible-tree
or
yarn add react-collapsible-tree
How To Use
The tree uses a flat structure, which contains items in the following structure:
"1": "id": "1" "name": "Item-1" "parentid": null // parentid for subfolders "children": null
Example input.json:
"items": "0": "id": "0" "name": "Item-1" "1": "id": "1" "name": "Item-1" "children": "1-1" "1-2" "1-3" "1-1": "id": "1-1" "name": "Item-1-1" "children": null "1-2": "id": "1-2" "name": "Item-1-2" "children": null "1-3": "id": "1-3" "name": "Item-1-3" "children": null "topIds": 01
Render component:
<Tree items=thisstateitems // items topIds=thisstatetopIds // array containing all top level item ids onSelection=thisonSelection // function selection=0 // selection parentIcon=undefined // icon for folder parentOpenIcon=undefined // icon for folder open leafIcon=undefined // icon for single file/>
don't forget the topIds prop, it tells the component which items to render at the top level
Implement onSelection:
first import TreeUtils
then add the method:
{ this}
TreeUtils.toggleItemsToId finds the passed in node of the tree by id. Then it adds an attribute showChildren: true
to all parents of that node. The Tree component updates itself accordingly after the new state was passed in.
Styling
For best styling using CSS, react-collapsible-tree adds some CSS Classes:
react-collapsible-tree-container
- outer containerreact-collapsible-tree-node
- a tree nodereact-collapsible-tree-node-selected
- a selected tree node