{"library":"rc-tree","title":"React Tree Component (Legacy)","description":"rc-tree is a foundational React UI component that provided a highly customizable and performant tree view. Its purpose was to display hierarchical data with features such as node expansion, selection, checking, dragging, and asynchronous data loading. The last stable version under the `rc-tree` package name is 5.13.1. Development on this package has ceased under this name, as it has been officially renamed and migrated to `@rc-component/tree` starting from version `@rc-component/tree@1.2.2`. While `rc-tree` offered robust capabilities like custom node rendering, virtualized lists for large datasets (in later versions before the rename), and broad browser support (including IE9+), users are strongly advised to migrate to the actively maintained `@rc-component/tree` for ongoing updates, bug fixes, and new features. The original `rc-tree` package itself does not have a defined release cadence anymore due to its renamed status.","language":"javascript","status":"renamed","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-tree"],"cli":null},"imports":["import Tree from 'rc-tree';","import 'rc-tree/assets/index.css';","import type { TreeProps } from 'rc-tree';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } => from 'react';\nimport Tree from 'rc-tree';\nimport 'rc-tree/assets/index.css';\n\nconst treeData = [\n  {\n    key: '0-0',\n    title: 'Parent Node 1',\n    children: [\n      { key: '0-0-0', title: 'Child Node 1-1' },\n      { key: '0-0-1', title: 'Child Node 1-2' },\n    ],\n  },\n  {\n    key: '0-1',\n    title: 'Parent Node 2',\n    children: [\n      { key: '0-1-0', title: 'Child Node 2-1' },\n      { key: '0-1-1', title: 'Child Node 2-2' },\n    ],\n  },\n];\n\nconst MyTreeComponent = () => {\n  const [expandedKeys, setExpandedKeys] = useState([]);\n  const [checkedKeys, setCheckedKeys] = useState([]);\n  const [selectedKeys, setSelectedKeys] = useState([]);\n\n  const onExpand = (keys) => {\n    console.log('onExpand', keys);\n    setExpandedKeys(keys);\n  };\n\n  const onCheck = (keys, info) => {\n    console.log('onCheck', keys, info);\n    setCheckedKeys(keys);\n  };\n\n  const onSelect = (keys, info) => {\n    console.log('onSelect', keys, info);\n    setSelectedKeys(keys);\n  };\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h2>Basic rc-tree Example</h2>\n      <Tree\n        checkable\n        defaultExpandAll\n        onExpand={onExpand}\n        expandedKeys={expandedKeys}\n        onCheck={onCheck}\n        checkedKeys={checkedKeys}\n        onSelect={onSelect}\n        selectedKeys={selectedKeys}\n        treeData={treeData}\n      />\n    </div>\n  );\n};\n\nexport default MyTreeComponent;","lang":"typescript","description":"This quickstart demonstrates a basic interactive tree component using `rc-tree` with checkable nodes, controlled expansion, checking, and selection states. It includes the necessary CSS import and a minimal `treeData` structure.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}