{"library":"rc-tree-select","title":"React Tree Select Component","description":"rc-tree-select is a highly customizable React UI component designed for selecting single or multiple items from a hierarchical tree structure. As part of the `react-component` ecosystem, it prioritizes unstyled, highly performant, and accessible base functionality, giving developers full control over styling and integration into custom design systems. The current stable version is `5.27.0`. While it maintains a consistent release cadence, the project has also seen the introduction of a scoped package, `@rc-component/tree-select` (currently around v1.x), which represents an ongoing evolution of the component and may introduce new features or a migration path for future consumers. Its primary differentiator is its \"headless\" nature, providing foundational logic without imposing visual styles, making it extremely flexible for diverse application needs.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install rc-tree-select"],"cli":null},"imports":["import { TreeSelect } from 'rc-tree-select';","import { TreeSelect, TreeNode } from 'rc-tree-select';","import type { TreeSelectProps } from 'rc-tree-select';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { TreeSelect } from 'rc-tree-select';\nimport 'rc-tree-select/assets/index.less'; // Or index.css for basic styles, though custom styling is common.\n\ninterface TreeDataItem {\n  value: string;\n  label: string;\n  children?: TreeDataItem[];\n}\n\nconst treeData: TreeDataItem[] = [\n  {\n    value: 'parent 1',\n    label: 'Parent 1',\n    children: [\n      {\n        value: 'parent 1-0',\n        label: 'Parent 1-0',\n        children: [\n          { value: 'leaf 1', label: 'Leaf 1' },\n          { value: 'leaf 2', label: 'Leaf 2' },\n        ],\n      },\n      { value: 'parent 1-1', label: 'Parent 1-1' },\n    ],\n  },\n  { value: 'parent 2', label: 'Parent 2' },\n];\n\nconst MyTreeSelectComponent: React.FC = () => {\n  const [value, setValue] = useState<string | string[] | undefined>(undefined);\n\n  const onChange = (newValue: string | string[] | undefined) => {\n    console.log('Selected:', newValue);\n    setValue(newValue);\n  };\n\n  return (\n    <div style={{ width: 300, margin: '50px auto' }}>\n      <h3>Basic TreeSelect Example</h3>\n      <TreeSelect\n        style={{ width: '100%' }}\n        value={value}\n        treeData={treeData}\n        placeholder=\"Please select\"\n        onChange={onChange}\n        allowClear\n        showSearch\n        treeDefaultExpandAll\n      />\n      <p>Selected Value: {JSON.stringify(value)}</p>\n    </div>\n  );\n};\n\nexport default MyTreeSelectComponent;\n","lang":"typescript","description":"This example demonstrates a basic controlled `TreeSelect` component in a React functional component using TypeScript. It includes `treeData` for defining the hierarchical options, `useState` to manage the selected value, and an `onChange` handler to update it. It also shows importing essential styles.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}