rc-cascader (Legacy)

Common errors

• Module not found: Can't resolve 'rc-cascader' in '...'

  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`.
  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.

• TypeError: Cannot read properties of undefined (reading 'render')

  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()`.
  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'));`.

Warnings

• breaking 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).
  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'.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Always provide a clickable child element (e.g., `<input>`, `<span>`, `<button>`) to act as the trigger for opening the cascader dropdown.

Install

• npm install rc-cascader npm
• yarn add rc-cascader yarn
• pnpm add rc-cascader pnpm

Imports

• Cascader
  wrong:

  const Cascader = require('rc-cascader');

  correct:

  import Cascader from 'rc-cascader';

  While CommonJS `require` works, modern React projects typically use ES module `import` syntax.
• CascaderProps

  import type { CascaderProps } from 'rc-cascader';

  Import types separately for better type-checking and bundle size optimization in TypeScript projects.
• Cascader
  wrong:

  import Cascader from '@rc-component/cascader';

  correct:

  import Cascader from 'rc-cascader';

  Ensure you are importing from the correct package name. `rc-cascader` is the older, deprecated name; `@rc-component/cascader` is its active successor.

Quickstart

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"`.

import React from 'react';
import ReactDOM from 'react-dom';
import Cascader from 'rc-cascader';

const options = [{
  'label': '福建',
  'value': 'fj',
  'children': [{
    'label': '福州',
    'value': 'fuzhou',
    'children': [{
      'label': '马尾',
      'value': 'mawei',
    }],
  }, {
    'label': '泉州',
    'value': 'quanzhou',
  }],
}, {
  'label': '浙江',
  'value': 'zj',
  'children': [{
    'label': '杭州',
    'value': 'hangzhou',
    'children': [{
      'label': '余杭',
      'value': 'yuhang',
    }],
  }],
}, {
  'label': '北京',
  'value': 'bj',
  'children': [{
    'label': '朝阳区',
    'value': 'chaoyang',
  }, {
    'label': '海淀区',
    'value': 'haidian',
  }],
}];

const App = () => (
  <div style={{ padding: 20 }}>
    <h2>Cascader Example</h2>
    <Cascader options={options} placeholder="Please select">
      <input style={{ width: 200, padding: 8, borderRadius: 4, border: '1px solid #ccc' }} readOnly value="Select region" />
    </Cascader>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));