https://github.com/swiftcarrot/react-ui-tree

React tree component with drag & drop
https://github.com/swiftcarrot/react-ui-tree

draggable javascript react tree

Last synced: about 2 months ago
JSON representation

React tree component with drag & drop

• Host: GitHub
• URL: https://github.com/swiftcarrot/react-ui-tree
• Owner: swiftcarrot
• License: mit
• Created: 2015-04-27T03:59:32.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-11-25T05:31:25.000Z (almost 4 years ago)
• Last Synced: 2024-05-16T14:09:38.241Z (4 months ago)
• Topics: draggable, javascript, react, tree
• Language: JavaScript
• Homepage: https://swiftcarrot.github.io/react-ui-tree/
• Size: 443 KB
• Stars: 755
• Watchers: 22
• Forks: 195
• Open Issues: 47
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-ui-tree - React tree component. (Uncategorized / Uncategorized)

README

        
# react-ui-tree

[![Build Status](https://travis-ci.org/pqx/react-ui-tree.svg)](https://travis-ci.org/pqx/react-ui-tree)

[![npm](https://img.shields.io/npm/v/react-ui-tree.svg)](https://www.npmjs.com/package/react-ui-tree)

[![npm](https://img.shields.io/npm/dm/react-ui-tree.svg)](https://www.npmjs.com/package/react-ui-tree)

React tree component

This project was initially developed for a webpage builder. It maintains an

internal tree structure within the component through

[js-tree](https://github.com/wangzuo/js-tree).

### Demo

[swiftcarrot.github.io/react-ui-tree/](swiftcarrot.github.io/react-ui-tree/)

### Installation

```sh

npm install react-ui-tree --save

```

### Usage

```javascript

// 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](https://github.com/pqx/react-ui-tree/blob/master/example/app.js)

for a working example

### Development

* npm install

* npm start

* http://localhost:8080/example

### License

MIT