{"id":14865,"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.","status":"renamed","version":"5.13.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/tree","tags":["javascript","react","react-component","react-tree","tree","typescript"],"install":[{"cmd":"npm install rc-tree","lang":"bash","label":"npm"},{"cmd":"yarn add rc-tree","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-tree","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The main Tree component is a default export. Ensure correct import syntax, especially in mixed CJS/ESM environments.","wrong":"import { Tree } from 'rc-tree';\nconst Tree = require('rc-tree').default;","symbol":"Tree","correct":"import Tree from 'rc-tree';"},{"note":"Required to include the default styles for the Tree component. Styles are not automatically bundled.","symbol":"rc-tree/assets/index.css","correct":"import 'rc-tree/assets/index.css';"},{"note":"For TypeScript users, import types using `import type` to avoid bundling issues and ensure type-only imports.","wrong":"import { TreeProps } from 'rc-tree';","symbol":"TreeProps","correct":"import type { TreeProps } from 'rc-tree';"}],"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."},"warnings":[{"fix":"Migrate your project to use `@rc-component/tree`. Uninstall `rc-tree` and install `@rc-component/tree`. Update all import paths from `rc-tree` to `@rc-component/tree`.","message":"The `rc-tree` package has been renamed to `@rc-component/tree`. All future development, bug fixes, and new features will occur under the new package name. `rc-tree` (npm) is no longer actively maintained.","severity":"breaking","affected_versions":">=1.2.2 of @rc-component/tree (which replaced rc-tree)"},{"fix":"Ensure you have `import 'rc-tree/assets/index.css';` (or similar for your build tool) in your entry point or directly in the component where `rc-tree` is used.","message":"The `rc-tree` package relies on specific CSS for its styling. If the `rc-tree/assets/index.css` file is not imported, the component will render unstyled, appearing broken or misaligned.","severity":"gotcha","affected_versions":"All versions of `rc-tree`"},{"fix":"Consider migrating to `@rc-component/tree` which has better modern module support. If you must use `rc-tree`, ensure your build tools (Webpack, Rollup, Vite) are configured to correctly transpile CommonJS modules for browser consumption.","message":"Using `rc-tree` in modern JavaScript projects, especially those strictly enforcing ESM, might lead to compatibility issues. `rc-tree` was developed in an era when CommonJS was prevalent, and its default export might require specific handling in ESM-only contexts.","severity":"deprecated","affected_versions":"All versions of `rc-tree` in ESM-first environments"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify `rc-tree` is listed in your `package.json` and installed. If you intended to use the newer version, install `@rc-component/tree` and update your imports accordingly.","cause":"The package `rc-tree` is not installed, or the import path is incorrect, or the package was uninstalled after migrating to the new name (`@rc-component/tree`).","error":"Module not found: Error: Can't resolve 'rc-tree'"},{"fix":"Ensure you are using `import Tree from 'rc-tree';` in ESM or `const Tree = require('rc-tree');` (or `const Tree = require('rc-tree').default;` if your bundler/loader requires it) in CJS.","cause":"This typically occurs when trying to `require` or `import` the `Tree` component incorrectly. `rc-tree` uses a default export for the main component, but sometimes transpilation or incorrect module resolution can lead to issues.","error":"TypeError: (0, _rc_tree.default) is not a function"},{"fix":"Add `import 'rc-tree/assets/index.css';` to your main application file or the component where `rc-tree` is used. Ensure your build system is configured to process CSS imports.","cause":"The essential CSS stylesheet for `rc-tree` has not been imported into the application.","error":"Tree component renders without any styling or with broken layout."}],"ecosystem":"npm"}