• Stars
    star
    756
  • Rank 57,962 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React tree component with drag & drop

react-ui-tree

Build Status npm npm

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

License

MIT

More Repositories

1

react-input-color

React color picker
JavaScript
242
star
2

queryx

Schema-first and type-safe ORM for Golang and TypeScript
Go
179
star
3

react-input-slider

React input slider component
JavaScript
141
star
4

react-progress-label

Progress component for React and React Native
JavaScript
92
star
5

react-frame

React components within an iframe for isolated css styling
JavaScript
55
star
6

bloodhound

bloodhound.js for node and browser
JavaScript
40
star
7

js-tree

Tree structure in javascript
JavaScript
38
star
8

react-grid

react grid component
JavaScript
17
star
9

react-input-number

React number input component
JavaScript
13
star
10

react-input-switch

React toggle switch component
JavaScript
13
star
11

dashi

Dashi is a framework for building GraphQL application in Go and React.
Go
12
star
12

stream-progressbar

Simple progress bar for node stream
JavaScript
8
star
13

react-vis-styles

react-vis styles as component
JavaScript
6
star
14

webpacker

Easy webpack
JavaScript
6
star
15

react-side-sheet

react side sheet
JavaScript
5
star
16

react-auth

Authentication in React and React Native
JavaScript
4
star
17

rex

schema-first and type-safe ORM
JavaScript
3
star
18

react-normalize

normalize.css as react component
JavaScript
3
star
19

flect

golang inflection
Go
3
star
20

request

HTTP client for web and React Native
JavaScript
2
star
21

storage2

html5 storage interface for node and browser
JavaScript
2
star
22

s2i-webpacker

openshift source-to-image for webpacker
Shell
2
star
23

react-ionicons

ionicons svg component for react
JavaScript
2
star
24

gradient-avatar

Default gradient avatar generation
Go
2
star
25

color

go color functions
Go
1
star
26

react-resize-box

JavaScript
1
star
27

primitives

react primitives for web
JavaScript
1
star
28

react-pagination

React pagination component
JavaScript
1
star
29

utils

utils
JavaScript
1
star
30

yaml-loader

webpack yaml loader
JavaScript
1
star
31

babel-preset-swiftcarrot

babel config
JavaScript
1
star