rc-cascader

The Cascader component supports several advanced capabilities:

Data Management

• Nested options: Handles hierarchical tree structures.
• Field name mapping: Allows customizing which keys represent labels, values, and children.
• Disabled nodes: Ability to disable specific nodes in the tree.

Selection Modes

• Single/Multiple: Supports selecting one or many values.
• Checkable: Supports checkable nodes.
• Change-on-select: Configurable selection flows.

Search & Loading

• Search: Supports controlled search, custom filtering, custom sorting, and custom rendering.
• Async Loading: Supports loading options dynamically using a loadData function.

Rendering

• Customization: Supports custom option labels, dropdown content, icons, and expand triggers.

To enable multiple selection, use the checkable prop.

• checkable (boolean | ReactNode): Enables checkbox UI for multiple selection.
• checkStrictly (boolean, default: false): When true, parent and children are checked independently. This disables the default behavior where checking a parent automatically checks all children (no conduction) and prevents 'half-checked' states.
• showCheckedStrategy (SHOW_PARENT | SHOW_CHILD, default: SHOW_PARENT): Determines how checked values are rendered in the input field when in multiple mode.

To use the Cascader component in your project, install the package using npm:

npm install @rc-component/cascader

Install the Cascader component using npm:

npm install @rc-component/cascader

To set up the development environment and run the documentation site (dumi):

npm install
npm start

The site will be available at http://localhost:8000.

When checkable is enabled, the Cascader enters multiple-selection mode. You can control how checked states propagate using showCheckedStrategy and checkStrictly.

• showCheckedStrategy: Determines which nodes are considered 'checked' in the value. Use Cascader.SHOW_PARENT or Cascader.SHOW_CHILD.
• checkStrictly: If true, parent and children nodes are checked independently. Checking a parent does not check its descendants, and checking a child does not affect its ancestors (no conduction, no half-checked state).

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

// Example: Independent selection (no conduction)
<Cascader
  checkable
  checkStrictly
  options={options}
/>

// Example: Using specific checked strategy
<Cascader
  checkable
  showCheckedStrategy={Cascader.SHOW_CHILD}
  options={options}
/>

The Cascader component is a selection component that allows users to make selections from a hierarchical tree of options. It supports single-select and multiple-select (checkable) modes, searching, and custom field mapping.

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

const options = [
  {
    label: 'Java',
    value: 'java',
    children: [
      { label: 'Spring', value: 'spring' },
      { label: 'Hibernate', value: 'hibernate' },
    ],
  },
];

const App = () => (
  <Cascader
    options={options}
    onChange={(value, selectedOptions) => {
      console.log('Selected values:', value);
      console.log('Selected options:', selectedOptions);
    }}
  />
);

The defaultValue prop allows you to pre-select specific nodes in the Cascader component when it is first mounted. You should provide an array of values representing the path to the desired nodes (e.g., ['value1', 'value2']).

// Based on the example implementation in examples/defaultValue.tsx
<Cascader
  options={options}
  defaultValue={['china', 'beijing']}
/>

The Cascader component allows users to select values from a hierarchical tree of options. It wraps a trigger element (like a button) that opens the dropdown when clicked. You must provide an options array containing the hierarchical data structure.

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

const options = [
  {
    label: 'Zhejiang',
    value: 'zhejiang',
    children: [
      {
        label: 'Hangzhou',
        value: 'hangzhou',
        children: [{ label: 'Xihu', value: 'xihu' }],
      },
    ],
  },
  {
    label: 'Jiangsu',
    value: 'jiangsu',
    children: [{ label: 'Nanjing', value: 'nanjing' }],
  },
];

export default () => (
  <Cascader options={options}>
    <button type="button">Please select</button>
  </Cascader>
);

To implement dynamic options (loading data on demand as a user navigates through levels), you can use the Cascader component by updating its options prop based on user interaction. This is typically achieved by monitoring changes to the selected path or using a mechanism to fetch new children when a node is expanded.

Refer to the dynamic-options.tsx example for the implementation pattern.

// See implementation in ../../examples/dynamic-options.tsx

To use the Cascader, provide an options array containing hierarchical data and wrap your trigger element (e.g., a button) inside the Cascader component.

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

const options = [
  {
    label: 'Zhejiang',
    value: 'zhejiang',
    children: [
      {
        label: 'Hangzhou',
        value: 'hangzhou',
        children: [{ label: 'Xihu', value: 'xihu' }],
      },
    ],
  },
  {
    label: 'Jiangsu',
    value: 'jiangsu',
    children: [{ label: 'Nanjing', value: 'nanjing' }],
  },
];

export default () => (
  <Cascader options={options}>
    <button type="button">Please select</button>
  </Cascader>
);