Socket
Socket
Sign inDemoInstall

rc-tree

Package Overview
Dependencies
4
Maintainers
2
Versions
304
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    rc-tree

tree ui component for react


Version published
Maintainers
2
Created

Package description

What is rc-tree?

The rc-tree npm package is a React component for displaying tree views. It provides flexible and efficient tree components with customizable nodes, drag-and-drop functionality, checkable nodes, and event handling for various actions like select, check, load data asynchronously, and more. It's suitable for implementing features like file systems, nested menus, or any hierarchical data representation.

What are rc-tree's main functionalities?

Basic Tree Structure

This feature allows the creation of a basic tree structure with nested nodes. The `treeData` prop defines the hierarchical structure of the tree.

import Tree from 'rc-tree';

const treeData = [{
  title: 'parent 1',
  key: '0-0',
  children: [{
    title: 'child 1-1',
    key: '0-0-1',
    children: [{
      title: 'leaf',
      key: '0-0-1-1'
    }]
  }, {
    title: 'child 1-2',
    key: '0-0-2',
    children: [{
      title: 'leaf',
      key: '0-0-2-1'
    }]
  }]
}];

<Tree treeData={treeData} />

Drag-and-Drop

Enables drag-and-drop functionality within the tree, allowing users to reorder nodes by dragging them. Event handlers like `onDragEnter` and `onDrop` can be used to manage the drag-and-drop process.

import Tree from 'rc-tree';

<Tree
  treeData={treeData}
  draggable
  onDragEnter={info => console.log('enter:', info)}
  onDrop={info => console.log('drop:', info)}
/>

Checkable Nodes

This feature adds checkboxes to tree nodes, making them selectable. The `onCheck` event handler is triggered when checkboxes are checked or unchecked, allowing for custom handling of these events.

import Tree from 'rc-tree';

<Tree
  checkable
  onCheck={checkedKeys => console.log('onCheck', checkedKeys)}
  treeData={treeData}
/>

Async Data Loading

Supports loading data asynchronously for nodes. This is useful for loading child nodes on demand, for example, when a node is expanded. The `loadData` function is called to fetch child nodes asynchronously.

import Tree from 'rc-tree';

const loadData = treeNode =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });

<Tree loadData={loadData} treeData={treeData} />

Other packages similar to rc-tree

Readme

Source

rc-tree


tree ui component for react

NPM version build status Test coverage gemnasium deps node version npm download Sauce Test Status

Sauce Test Status

Screenshots

Feature

  • support ie8,ie8+,chrome,firefox,safari

Example

http://localhost:8018/examples/

online example: http://react-component.github.io/tree/examples/

install

rc-tree

Usage

var React = require('react');
var Tree = require('rc-tree');
var TreeNode = Tree.TreeNode;
React.render(
  <Tree>
    <TreeNode>leaf </TreeNode>
    <TreeNode>leaf </TreeNode>
  <Tree/>, container);

API

Tree props

namedescriptiontypedefault
classNameadditional css class of root dom nodeString''
prefixClsprefix classString''
showLinewhether show linebooltrue
showIconwhether show iconbooltrue
checkablewhether support checkedboolfalse
expandAllexpand all treeNodesboolfalse
onSelectclick the TreeNode to fire(auto switch selected state)function-
onCheckedclick the TreeNode's checkbox to checked(auto switch checked state)function-

TreeNode props

namedescriptiontypedefault
classNameadditional class to treeNodeString''
titletree/subTree's titleString'---'
defaultExpandedwhether default expand the treeNodeboolfalse
expandedwhether expand the treeNode, it's controlledboolfalse

Keyboard

  • KeyDown/KeyUp

Development

npm install
npm start

Test Case

http://localhost:8003/tests/runner.html?coverage

Coverage

http://localhost:8003/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8003/tests/runner.html?coverage

License

rc-tree is released under the MIT license.

Keywords

FAQs

Last updated on 05 Aug 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc