or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

async-loading.mddata-management.mddrag-drop.mdindex.mdselection-checking.mdtree-component.mdtree-node.mdvirtual-scrolling.md
tile.json

tessl/npm-rc-tree

Tree UI component for React with selection, checkboxes, drag-drop, and virtual scrolling features

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-tree@5.13.x

To install, run

npx @tessl/cli install tessl/npm-rc-tree@5.13.0

index.mddocs/

RC Tree

RC Tree is a comprehensive React tree component that enables developers to build hierarchical data displays with rich interactive features. It supports essential tree operations including node selection (single and multiple), checkboxes with strict and non-strict modes, drag-and-drop functionality, asynchronous data loading, virtual scrolling for performance, and extensive customization options for icons, styling, and behavior.

Package Information

  • Package Name: rc-tree
  • Package Type: npm
  • Language: TypeScript/JavaScript (React)
  • Installation: npm install rc-tree

Core Imports

import Tree, { TreeNode } from "rc-tree";

For CommonJS:

const Tree = require("rc-tree");
const { TreeNode } = require("rc-tree");

Additional imports:

import Tree, { TreeNode, UnstableContext } from "rc-tree";
import type { TreeProps, TreeNodeProps, BasicDataNode, FieldDataNode } from "rc-tree";

CSS styling:

import "rc-tree/assets/index.css";

Basic Usage

import React, { useState } from "react";
import Tree, { TreeNode } from "rc-tree";
import "rc-tree/assets/index.css";

const App = () => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>(['0-0']);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);

  return (
    <Tree
      checkable
      onExpand={(keys) => setExpandedKeys(keys)}
      expandedKeys={expandedKeys}
      onSelect={(keys) => setSelectedKeys(keys)}
      selectedKeys={selectedKeys}
      onCheck={(checked) => setCheckedKeys(Array.isArray(checked) ? checked : checked.checked)}
      checkedKeys={checkedKeys}
    >
      <TreeNode key="0-0" title="Root Node">
        <TreeNode key="0-0-0" title="Child Node 1" />
        <TreeNode key="0-0-1" title="Child Node 2" />
      </TreeNode>
    </Tree>
  );
};

Architecture

RC Tree is built around several key components:

  • Tree Component: Main container component managing tree state, interactions, and rendering
  • TreeNode Component: Individual node component handling display and user interactions
  • Data Management: Support for both JSX children and data-driven approaches via treeData prop
  • Virtual Scrolling: Performance optimization for large trees using rc-virtual-list
  • Context System: TreeContext for sharing configuration and event handlers across components
  • Utility System: Comprehensive utilities for tree data manipulation, flattening, and transformations

Capabilities

Tree Component

Main tree container with comprehensive configuration options for rendering hierarchical data, handling user interactions, and managing tree state.

interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
  prefixCls?: string; // Default: 'rc-tree'
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  treeData?: TreeDataType[];
  // ... comprehensive configuration options
}

declare class Tree<TreeDataType extends BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>>;

Tree Component

TreeNode Component

Individual tree node component for rendering nodes with titles, icons, checkboxes, and handling user interactions like selection and expansion.

interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
  eventKey?: Key;
  className?: string;
  style?: React.CSSProperties;
  title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
  expanded?: boolean;
  selected?: boolean;
  checked?: boolean;
  // ... node-specific configuration
}

declare const TreeNode: React.FC<TreeNodeProps>;

TreeNode Component

Data Management

Flexible data management supporting both JSX children and data-driven approaches with customizable field mappings and type-safe data structures.

interface BasicDataNode {
  checkable?: boolean;
  disabled?: boolean;
  disableCheckbox?: boolean;
  icon?: IconType;
  isLeaf?: boolean;
  selectable?: boolean;
  switcherIcon?: IconType;
  className?: string;
  style?: React.CSSProperties;
}

type FieldDataNode<T, ChildFieldName extends string = 'children'> = BasicDataNode &
  T &
  Partial<Record<ChildFieldName, FieldDataNode<T, ChildFieldName>[]>>;

type DataNode = FieldDataNode<{
  key: Key;
  title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
}>;

Data Management

Selection & Checking

Comprehensive selection and checking system with support for single/multiple selection, checkbox hierarchies, and strict/non-strict checking modes.

interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
  event: 'check';
  node: EventDataNode<TreeDataType>;
  checked: boolean;
  nativeEvent: MouseEvent;
  checkedNodes: TreeDataType[];
  checkedNodesPositions?: { node: TreeDataType; pos: string }[];
  halfCheckedKeys?: Key[];
}

Selection & Checking

Drag & Drop

Built-in drag and drop functionality with customizable drop validation, drag constraints, and comprehensive event handling for tree reorganization.

interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode> {
  dragNode: TreeDataType;
  dropNode: TreeDataType;
  dropPosition: -1 | 0 | 1;
}

type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (
  options: AllowDropOptions<TreeDataType>,
) => boolean;

type DraggableConfig = {
  icon?: React.ReactNode | false;
  nodeDraggable?: (node: DataNode) => boolean;
};

Drag & Drop

Virtual Scrolling

Performance optimization for large tree datasets using virtual scrolling with configurable item heights and scroll behaviors.

interface VirtualScrollProps {
  height?: number;
  itemHeight?: number;
  virtual?: boolean;
  scrollWidth?: number;
  itemScrollOffset?: number;
}

Virtual Scrolling

Async Loading

Asynchronous data loading support for lazy-loading tree nodes with loading states and error handling.

type LoadDataFunction<TreeDataType extends BasicDataNode = DataNode> = (
  treeNode: EventDataNode<TreeDataType>
) => Promise<any>;

interface LoadInfo<TreeDataType extends BasicDataNode = DataNode> {
  event: 'load';
  node: EventDataNode<TreeDataType>;
}

Async Loading

Types

Core Types

type Key = React.Key;
type SafeKey = Exclude<Key, bigint>;

type IconType = React.ReactNode | ((props: TreeNodeProps) => React.ReactNode);

type Direction = 'ltr' | 'rtl' | undefined;

type ExpandAction = false | 'click' | 'doubleClick';

interface FieldNames {
  title?: string;
  _title?: string[];
  key?: string;
  children?: string;
}

Event Types

type NodeMouseEventHandler<
  TreeDataType extends BasicDataNode = DataNode,
  T = HTMLSpanElement,
> = (e: React.MouseEvent<T>, node: EventDataNode<TreeDataType>) => void;

type NodeDragEventHandler<
  TreeDataType extends BasicDataNode = DataNode,
  T = HTMLDivElement,
> = (e: React.DragEvent<T>, nodeProps: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;

interface EventDataNode<TreeDataType> extends TreeDataType, BasicDataNode {
  key: Key;
  expanded: boolean;
  selected: boolean;
  checked: boolean;
  loaded: boolean;
  loading: boolean;
  halfChecked: boolean;
  dragOver: boolean;
  dragOverGapTop: boolean;
  dragOverGapBottom: boolean;
  pos: string;
  active: boolean;
}