tessl/npm-rc-tree-select

tree-select ui component for react

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

rc-tree-select

Name: tessl/npm-rc-tree-select
Author: tessl

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;
}

Install with Tessl CLI