or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-management.mdindex.mdselection-strategies.mdtree-node-component.mdtree-select-component.md
tile.json

tessl/npm-rc-tree-select

tree-select ui component for react

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

To install, run

npx @tessl/cli install tessl/npm-rc-tree-select@5.27.0

index.mddocs/

rc-tree-select

rc-tree-select is a comprehensive React tree-select component that enables users to select values from hierarchical tree structures through an intuitive dropdown interface. It offers extensive customization options including single and multiple selection modes, checkable tree nodes, search functionality with filtering, asynchronous data loading, and virtual scrolling for performance optimization with large datasets.

Package Information

  • Package Name: rc-tree-select
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-tree-select

Core Imports

import TreeSelect, { TreeNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from "rc-tree-select";
import type { TreeSelectProps } from "rc-tree-select";

For CommonJS:

const TreeSelect = require("rc-tree-select");
const { TreeNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } = require("rc-tree-select");

Basic Usage

import TreeSelect, { TreeNode } from "rc-tree-select";
// Import CSS styles (required for proper styling)
import "rc-tree-select/assets/index.css";

// Simple tree data
const treeData = [
  {
    key: "0-0",
    value: "0-0",
    title: "Node 0-0",
    children: [
      { key: "0-0-0", value: "0-0-0", title: "Node 0-0-0" },
      { key: "0-0-1", value: "0-0-1", title: "Node 0-0-1" },
    ],
  },
  {
    key: "0-1", 
    value: "0-1",
    title: "Node 0-1",
  },
];

// Basic usage
function MyComponent() {
  const [value, setValue] = useState();

  return (
    <TreeSelect
      style={{ width: '100%' }}
      value={value}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      treeData={treeData}
      placeholder="Please select"
      treeDefaultExpandAll
      onChange={setValue}
    />
  );
}

Architecture

rc-tree-select is built on several key components:

  • TreeSelect Component: Main component providing the dropdown interface and tree functionality
  • TreeNode Component: Declarative component for defining tree structure using JSX
  • Selection Strategies: Constants controlling how selected values are displayed (SHOW_ALL, SHOW_PARENT, SHOW_CHILD)
  • Data Management: Hooks and utilities for managing tree data, entities, and selection state
  • Virtual Scrolling: Performance optimization for large datasets using rc-virtual-list
  • Base Select Integration: Built on rc-select for core dropdown functionality

Capabilities

Core TreeSelect Component

The main TreeSelect component with comprehensive configuration options for single/multiple selection, checkable nodes, search functionality, async loading, and tree display customization.

interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> {
  // Value management
  value?: ValueType;
  defaultValue?: ValueType;
  onChange?: (value: ValueType, labelList: React.ReactNode[], extra: ChangeEventExtra) => void;
  
  // Selection configuration
  multiple?: boolean;
  treeCheckable?: boolean | React.ReactNode;
  maxCount?: number;
  
  // Data source
  treeData?: OptionType[];
  children?: React.ReactNode;
  
  // Tree display
  treeDefaultExpandAll?: boolean;
  treeLine?: boolean;
  showTreeIcon?: boolean;
  
  // Search functionality
  searchValue?: string;
  autoClearSearchValue?: boolean;
  filterTreeNode?: boolean | ((inputValue: string, treeNode: DataNode) => boolean);
  
  // Performance
  virtual?: boolean;
  listHeight?: number;
  
  // Styling
  prefixCls?: string;
  className?: string;
}

Core TreeSelect Component

TreeNode Component

Declarative JSX component for defining tree structure with children, useful for static tree data that can be expressed in JSX form.

interface TreeNodeProps extends DataNode {
  value: Key;
  children?: React.ReactNode;
}

TreeNode Component

Selection Strategies

Constants that control how selected values are displayed when using checkable trees in multiple selection mode.

const SHOW_ALL: CheckedStrategy;
const SHOW_PARENT: CheckedStrategy; 
const SHOW_CHILD: CheckedStrategy;

Selection Strategies

Data Management

Utility functions and hooks for managing tree data structures, field name mapping, value formatting, and selection state.

// Core data types
interface DataNode extends Record<string, any> {
  key?: Key;
  value?: SafeKey;
  title?: React.ReactNode;
  children?: DataNode[];
  disabled?: boolean;
  disableCheckbox?: boolean;
  checkable?: boolean;
  isLeaf?: boolean;
}

type SafeKey = string | number;
type Key = string | number | null;

Data Management

Types

// Selection strategy type
type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';

// Value types for labelInValue mode
interface LabeledValueType {
  key?: Key;
  value?: SafeKey; 
  label?: React.ReactNode;
  halfChecked?: boolean;
}

// Event information
interface ChangeEventExtra {
  preValue: SafeKey[];
  triggerValue: SafeKey;
  triggerNode: DataNode;
  selected?: boolean;
  checked?: boolean;
}

// Field name mapping for custom data structures
interface FieldNames {
  label?: string;
  value?: string;
  children?: string;
}

// Simple mode configuration for flat data
interface SimpleModeConfig {
  id?: string;
  pId?: string;
  rootPId?: string;
}