{"id":15777,"library":"rc-cascader","title":"rc-cascader (Legacy)","description":"This package, `rc-cascader`, is a foundational React UI component providing a robust and unstyled cascader (hierarchical select) control. Its latest official release under this name is version 3.34.0. While stable for existing applications, new development should strongly consider migrating to its successor, `@rc-component/cascader`, which is the actively maintained and refactored version of this component (starting with `@rc-component/cascader` v1.8.0). `rc-cascader` emphasizes core functionality and accessibility, providing the logic for hierarchical selection without imposing specific styling, making it highly adaptable for integration into custom design systems like Ant Design. It depends on `react` and `react-dom` versions 16.9.0 or higher.","status":"deprecated","version":"3.34.0","language":"javascript","source_language":"en","source_url":"https://github.com/react-component/cascader","tags":["javascript","react","react-component","react-cascader","react-select","select","cascade","cascader","typescript"],"install":[{"cmd":"npm install rc-cascader","lang":"bash","label":"npm"},{"cmd":"yarn add rc-cascader","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-cascader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"While CommonJS `require` works, modern React projects typically use ES module `import` syntax.","wrong":"const Cascader = require('rc-cascader');","symbol":"Cascader","correct":"import Cascader from 'rc-cascader';"},{"note":"Import types separately for better type-checking and bundle size optimization in TypeScript projects.","symbol":"CascaderProps","correct":"import type { CascaderProps } from 'rc-cascader';"},{"note":"Ensure you are importing from the correct package name. `rc-cascader` is the older, deprecated name; `@rc-component/cascader` is its active successor.","wrong":"import Cascader from '@rc-component/cascader';","symbol":"Cascader","correct":"import Cascader from 'rc-cascader';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Cascader from 'rc-cascader';\n\nconst options = [{\n  'label': '福建',\n  'value': 'fj',\n  'children': [{\n    'label': '福州',\n    'value': 'fuzhou',\n    'children': [{\n      'label': '马尾',\n      'value': 'mawei',\n    }],\n  }, {\n    'label': '泉州',\n    'value': 'quanzhou',\n  }],\n}, {\n  'label': '浙江',\n  'value': 'zj',\n  'children': [{\n    'label': '杭州',\n    'value': 'hangzhou',\n    'children': [{\n      'label': '余杭',\n      'value': 'yuhang',\n    }],\n  }],\n}, {\n  'label': '北京',\n  'value': 'bj',\n  'children': [{\n    'label': '朝阳区',\n    'value': 'chaoyang',\n  }, {\n    'label': '海淀区',\n    'value': 'haidian',\n  }],\n}];\n\nconst App = () => (\n  <div style={{ padding: 20 }}>\n    <h2>Cascader Example</h2>\n    <Cascader options={options} placeholder=\"Please select\">\n      <input style={{ width: 200, padding: 8, borderRadius: 4, border: '1px solid #ccc' }} readOnly value=\"Select region\" />\n    </Cascader>\n  </div>\n);\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"typescript","description":"This example demonstrates how to render a basic Cascader component with static hierarchical options, using an input field as the trigger. It requires a root HTML element with `id=\"root\"`."},"warnings":[{"fix":"For new projects or to receive updates, uninstall `rc-cascader` and install `@rc-component/cascader`. Update all import paths from 'rc-cascader' to '@rc-component/cascader'.","message":"The `rc-cascader` package has been superseded and effectively renamed to `@rc-component/cascader`. All active development, bug fixes, and new features are now exclusively released under the `@rc-component/cascader` package (starting with its v1.8.0 release).","severity":"breaking","affected_versions":"All versions of `rc-cascader` (>=3.0.0)"},{"fix":"Be prepared to write custom CSS or use a UI library that wraps `rc-cascader` with predefined styles. Refer to the official examples for styling integration patterns.","message":"The `rc-cascader` component provides unstyled logic. If you are expecting a fully styled component, you will need to apply your own CSS or integrate it within a design system like Ant Design which provides its own styling for this component.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Always provide a clickable child element (e.g., `<input>`, `<span>`, `<button>`) to act as the trigger for opening the cascader dropdown.","message":"The `Cascader` component in its raw form requires a child element to act as its trigger. If no child is provided, the component might not render correctly or be interactable.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `rc-cascader` is listed in your `package.json` and installed (`npm install rc-cascader`). If migrating, update imports to `import Cascader from '@rc-component/cascader';` after installing the new package.","cause":"The package `rc-cascader` is not installed, or you are attempting to import it while `rc-cascader` has been uninstalled in favor of `@rc-component/cascader`.","error":"Module not found: Can't resolve 'rc-cascader' in '...'"},{"fix":"For React 18+, use `import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);`. For older React versions, ensure you have `import ReactDOM from 'react-dom';` and call `ReactDOM.render(<App />, document.getElementById('root'));`.","cause":"This error often occurs in modern React setups when `React.render` is called directly. `React.render` has been deprecated since React 18, which uses `ReactDOM.createRoot().render()`.","error":"TypeError: Cannot read properties of undefined (reading 'render')"}],"ecosystem":"npm"}