Universe React UI Tree

React tree component

Installation

meteor add universe:react-ui-tree
//if you don't have yet:
meteor add universe:modules

Usage

1import Tree from '{universe:react-ui-tree}';
2<Tree
3  paddingLeft={20}              // left padding for children nodes in pixels
4  tree={this.state.tree}        // tree object
5  onChange={this.handleChange}  // onChange(tree, draggingData) tree object changed
6  renderNode={this.renderNode}  // renderNode(item) return react element
7/>
8
9// draggingData looks like:
10
11-  id: A identificator of dragging
12-  x: coordination in x-axis,
13-  y: coordination in y-axis,
14-  w: wight,
15-  h: height,
16-  ctrlKey: if ctrl key was pressed on dragging start,
17-  metaKey: if meta key was pressed on dragging start,
18-  altKey: if alt was pressed on dragging start
19
20// a sample tree object
21// node.children, node.collapsed, node.leaf properties are hardcoded
22{
23  title: "Pages",
24  children: [{
25    collapsed: true,
26    title: "Doc one",
27    children: [{
28      _id: "abclkfdkjfdjk",
29      title: "Doc two"
30    }]
31  }]
32}

License

MIT

Made based on npm package pqx/react-ui-tree (not just adapted)