universe:react-ui-tree

v1.0.0Published 8 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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)