Package Exports

react-collapsible-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-collapsible-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-collapsible-tree

Creates a React Tree View from JSON Data

For full explanation, look at the example in examples/normal-tree

Install:

npm install react-collapsible-tree

yarn install react-collapsible-tree

Input JSON:

{
  "data": [{
    "id": 1,
    "name": "Node 1",
    "children": [{
      "id": 2,
      "name": "Node 2",
      "children": [{
        "id": 3,
        "name": "Node 3"
      },
      {
        "id": 4,
        "name": "Node 3"
      }]
    }]
  ]}
}

Render component:

<Tree
  items={this.state.items}
  onSelection={this.onNodeClick}
  className={'Tree'}
  selection={this.state.selection}
/>

Props:

onSelection:

onNodeClick = node => {
  if (TreeUtils.isNodeTypeParent(node.type))
    this.setState({
      items: TreeUtils.toggleItemsToId(this.state.items, node.id),
      selection: node.id
    })
}

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.

selection: Receives the id of the currently selected node. The node which is selected becomes a class called react-collapsible-tree-selected for styling purposes

nodeClassName: A classname for every node in the Tree

className: Classname of the Tree