swiftcarrot / React Ui Tree
Licence: mit
React tree component with drag & drop
Stars: ✭ 720
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Ui Tree
twtree
a highly customizable tree component for vue 2
Stars: ✭ 27 (-96.25%)
Mutual labels: tree, draggable
Angular Draggable Mat Tree
Example implementation of drag and drop on Angular Material Tree
Stars: ✭ 47 (-93.47%)
Mutual labels: tree, draggable
vue-sortable-tree
vue tree draggable, drag item sort
Stars: ✭ 87 (-87.92%)
Mutual labels: tree, draggable
vue2-data-tree
A tree that data is lazy loaded. Support dragging node, checking node, editing node's name and selecting node.
Stars: ✭ 41 (-94.31%)
Mutual labels: tree, draggable
Vue Draggable Resizable Gorkys
Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线
Stars: ✭ 521 (-27.64%)
Mutual labels: draggable
Broot
A new way to see and navigate directory trees : https://dystroy.org/broot
Stars: ✭ 6,362 (+783.61%)
Mutual labels: tree
Dsa.js Data Structures Algorithms Javascript
🥞Data Structures and Algorithms explained and implemented in JavaScript + eBook
Stars: ✭ 6,251 (+768.19%)
Mutual labels: tree
Moveable
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
Stars: ✭ 6,378 (+785.83%)
Mutual labels: draggable
Fern.vim
🌿 General purpose asynchronous tree viewer written in Pure Vim script
Stars: ✭ 552 (-23.33%)
Mutual labels: tree
Project Explorer
🎋A CLI tool to create an annotated tree visualization of any project
Stars: ✭ 485 (-32.64%)
Mutual labels: tree
React Range
🎚️Range input with a slider. Accessible. Bring your own styles and markup.
Stars: ✭ 545 (-24.31%)
Mutual labels: draggable
Nanomorph
🚅 - Hyper fast diffing algorithm for real DOM nodes
Stars: ✭ 621 (-13.75%)
Mutual labels: tree
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+3183.47%)
Mutual labels: draggable
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.
Demo
swiftcarrot.github.io/react-ui-tree/
Installation
npm install react-ui-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
/>
// 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:8080/example
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].