react-ui-sortable-tree

React tree component

Forked from https://github.com/pqx/react-ui-tree. Fully reworked sorting (drag-n-drop) of tree to allow control of drop (see prop canMoveNode). Important! Add class 'm-tree-container' to html-element that holds tree AND is scrollable.

This project was initially developed for a webpage builder. It maintains an internal tree structure within the component through js-tree.

Demo

https://ukrbublik.github.io/react-ui-sortable-tree/

Installation

npm install react-ui-sortable-tree --save

Usage

<Tree
  paddingLeft={20}               // left padding for children nodes in pixels
  tree={this.state.tree}         // tree object
  onChange={this.handleChange}   // onChange(tree) tree object changed
  renderNode={this.renderNode}   // renderNode(node) return react element
  canMoveNode={this.canMoveNode} // canMoveNode(from, to, placement, parent) return bool
/>
 
// a sample tree object
// node.children, node.collapsed, node.leaf properties are hardcoded
{
  "module": "react-ui-tree",
  "children": [{
    "collapsed": true,
    "module": "dist",
    "children": [{
      "module": "node.js"
    }]
  }]
}

check app.js for a working example

Development

• npm install
• npm start
• http://localhost:8888/example

License

MIT