react-component/tree

English | 简体中文

Highlights

• Controlled and uncontrolled expansion, selection, checking, drag and drop, and async loading.
• Virtual scrolling for large trees through @rc-component/virtual-list.
• TypeScript definitions for tree data, node props, and event payloads.

Install

npm install @rc-component/tree

Usage

import Tree from '@rc-component/tree';
import type { DataNode } from '@rc-component/tree';
import '@rc-component/tree/assets/index.css';

const treeData: DataNode[] = [
  {
    key: '0',
    title: 'Documents',
    children: [{ key: '0-0', title: 'Roadmap' }],
  },
];

export default () => (
  <Tree defaultExpandAll treeData={treeData} onSelect={keys => console.log(keys)} />
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Tree props

TreeNode props

note: if you have a lot of TreeNode, like more than 1000,
make the parent node is collapsed by default, will obvious effect, very fast.
Because the children hide TreeNode will not insert into dom.

Note

The number of treeNodes can be very large, but when enable checkable, it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates), to avoid double computing. But, this bring some restrictions, when you async load treeNodes, you should render tree like this {this.state.treeData.length ? <Tree ...>{this.state.treeData.map(t => <TreeNode ... />)}</Tree> : 'loading tree'}

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

Run checks before sending a pull request:

npm run lint
npm run tsc
npm test -- --runInBand
npm run build

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

Ecosystem

This package is part of the React Component organization and is maintained alongside Ant Design. The Ant Design mark above is used only as ecosystem context; the package itself stays framework-level and unstyled except for its bundled assets.

Other tree views

• zTree
• jqTree
• jquery.treeselect
• Angular Multi Select Tree

License

@rc-component/tree is released under the MIT license.