### Install and Start Development Server

Source: https://github.com/react-component/cascader/blob/master/README.md

Installs project dependencies using npm and starts the development server. This is the primary command for local development and testing.

```bash
npm install
npm start
```

--------------------------------

### Install Cascader Component using npm

Source: https://github.com/react-component/cascader/blob/master/README.md

This command installs the @rc-component/cascader package and saves it as a dependency in your project's package.json file.

```bash
$ npm install @rc-component/cascader --save
```

--------------------------------

### Cascader: Advanced Search Configuration (React)

Source: https://context7.com/react-component/cascader/llms.txt

This example demonstrates advanced search configuration for the Cascader component. It includes custom filtering, rendering, and sorting of search results using the `showSearch` prop with a `SearchConfig` object. The `onSearch` handler logs the search input, and `autoClearSearchValue` is enabled to clear the search input after a selection.

```tsx
import React, { useState } from 'react';
import Cascader from '@rc-component/cascader';
import type { CascaderProps, SearchConfig } from '@rc-component/cascader';

const options = [
  {
    label: '福建',
    value: 'fj',
    children: [
      {
        label: '福州',
        value: 'fuzhou',
        children: [
          {
            label: '马尾',
            value: 'mawei',
          },
        ],
      },
    ],
  },
];

const Demo = () => {
  const [searchValue, setSearchValue] = useState('');

  const searchConfig: SearchConfig = {
    // Custom filter logic
    filter: (inputValue, options, fieldNames) => {
      return options.some(option =>
        String(option[fieldNames.label]).toLowerCase().includes(inputValue.toLowerCase())
      );
    },
    // Custom render for search results
    render: (inputValue, path, prefixCls, fieldNames) => {
      return path.map(option => option[fieldNames.label]).join(' / ');
    },
    // Sort search results
    sort: (a, b, inputValue, fieldNames) => {
      const aLabel = a.map(opt => opt[fieldNames.label]).join('');
      const bLabel = b.map(opt => opt[fieldNames.label]).join('');
      return aLabel.localeCompare(bLabel);
    },
    // Limit number of results
    limit: 50,
    // Match input width
    matchInputWidth: true,
    // Controlled search value
    searchValue: searchValue,
    onSearch: (value) => {
      console.log('Search:', value);
      setSearchValue(value);
    },
    // Clear search on select
    autoClearSearchValue: true,
  };

  const onChange: CascaderProps['onChange'] = (value, selectedOptions) => {
    console.log('Selected:', value, selectedOptions);
  };

  return (
    <Cascader
      options={options}
      onChange={onChange}
      showSearch={searchConfig}
      style={{ width: 300 }}
    />
  );
};

```

--------------------------------

### Cascader: Change on Select with Hover Trigger (React)

Source: https://context7.com/react-component/cascader/llms.txt

This example demonstrates how to configure the Cascader component to emit change events on intermediate selections and expand submenus on hover. It utilizes the `changeOnSelect` and `expandTrigger` props. The `onChange` function logs the selected value and options to the console.

```tsx
import React from 'react';
import Cascader from '@rc-component/cascader';
import type { CascaderProps } from '@rc-component/cascader';

const options = [
  {
    label: 'Women Clothing',
    value: 'Women Clothing',
    children: [
      {
        label: 'Women Tops, Blouses & Tee',
        value: 'Women Tops, Blouses & Tee',
        children: [
          {
            label: 'Women T-Shirts',
            value: 'Women T-Shirts',
          },
          {
            label: 'Women Tops',
            value: 'Women Tops',
          },
          {
            label: 'Women Tank Tops & Camis',
            value: 'Women Tank Tops & Camis',
          },
          {
            label: 'Women Blouses',
            value: 'Women Blouses',
          },
        ],
      },
      {
        label: 'Women Suits',
        value: 'Women Suits',
        children: [
          {
            label: 'Women Suit Pants',
            value: 'Women Suit Pants',
          },
          {
            label: 'Women Suit Sets',
            value: 'Women Suit Sets',
          },
          {
            label: 'Women Blazers',
            value: 'Women Blazers',
          },
        ],
      },
    ],
  },
];

const onChange: CascaderProps['onChange'] = (value, selectedOptions) => {
  console.log(value, selectedOptions);
  // Triggered on each level selection, not just leaf nodes
  // value: ['Women Clothing', 'Women Tops, Blouses & Tee']
};

const Demo = () => (
  <Cascader
    showSearch
    options={options}
    onChange={onChange}
    changeOnSelect
    expandTrigger="hover"
    loadData={() => console.log('loadData')}
  />
);
```

--------------------------------

### Cascader: Panel Mode (Embedded Display) (React)

Source: https://context7.com/react-component/cascader/llms.txt

This example showcases the 'Panel' mode of the Cascader component, allowing it to be rendered as an inline panel without a dropdown wrapper. It uses the `Panel` component directly and manages the selected value using React's `useState` hook. The `onChange` handler updates the state and logs the selection.

```tsx
import React, { useState } from 'react';
import { Panel } from '@rc-component/cascader';
import type { CascaderProps } from '@rc-component/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',
          },
        ],
      },
    ],
  },
];

const Demo = () => {
  const [value, setValue] = useState<string[]>(['fj', 'fuzhou']);

  const onChange: CascaderProps['onChange'] = (value, selectedOptions) => {
    console.log('Selected:', value, selectedOptions);
    setValue(value);
  };

  return (
    <Panel
      options={options}
      value={value}
      onChange={onChange}
      style={{ width: 600, border: '1px solid #ccc' }}
    />
  );
};

```

--------------------------------

### Basic Usage of React Cascader Component

Source: https://github.com/react-component/cascader/blob/master/README.md

Demonstrates how to import and use the Cascader component in a React application. It includes defining sample options for a cascader with nested children and rendering the component with these options.

```javascript
import React from 'react';
import Cascader from '@rc-component/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',
  }],
}];

React.render(
  <Cascader options={options}>
    ...
  </Cascader>
, container);

```

--------------------------------

### Run Test Suite

Source: https://github.com/react-component/cascader/blob/master/README.md

Executes the project's test suite using npm test. This command is essential for verifying the component's functionality and ensuring code quality.

```bash
npm test
```

--------------------------------

### Basic Cascader Usage (React)

Source: https://context7.com/react-component/cascader/llms.txt

Demonstrates a single-selection Cascader component in React. It takes hierarchical options and an onChange handler to process selected values and labels. The input element displays the selected address.

```tsx
import React, { useState } from 'react';
import Cascader from '@rc-component/cascader';
import type { CascaderProps } from '@rc-component/cascader';

const addressOptions = [
  {
    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',
        disabled: true,
      },
    ],
  },
];

const Demo = () => {
  const [inputValue, setInputValue] = useState('');

  const onChange: CascaderProps['onChange'] = (value, selectedOptions) => {
    console.log(value, selectedOptions);
    // value: ['fj', 'fuzhou', 'mawei']
    // selectedOptions: [{ label: '福建', value: 'fj', ... }, ...]
    setInputValue(selectedOptions.map(o => o.label).join(', '));
  };

  return (
    <Cascader options={addressOptions} onChange={onChange}>
      <input placeholder="please select address" value={inputValue} />
    </Cascader>
  );
};

```

--------------------------------

### Cascader Component Props

Source: https://github.com/react-component/cascader/blob/master/README.md

This section details the various props available for configuring the Cascader component, covering data sources, selection behavior, event handling, and display options.

```APIDOC
## Cascader Component Props

This documentation outlines the available props for the Cascader component.

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| options | Object | - | The data options of cascade. |
| value | Array | - | Selected value. |
| defaultValue | Array | - | Initial selected value. |
| onChange | Function(value, selectedOptions) | - | Callback when finishing cascader select. |
| changeOnSelect | Boolean | false | Change value on each selection. |
| loadData | Function(selectedOptions) | - | Callback when click any option, use for loading more options. |
| expandTrigger | String | 'click' | Expand current item when click or hover. |
| open | Boolean | - | Visibility of popup overlay. |
| onPopupVisibleChange | Function(visible) | - | Callback when popup overlay's visibility changed. |
| transitionName | String | - | Transition className like "slide-up". |
| prefixCls | String | rc-cascader | Prefix className of popup overlay. |
| popupClassName | String | - | Additional className of popup overlay. |
| popupPlacement | String | bottomLeft | Use preset popup align config from builtinPlacements：bottomRight topRight bottomLeft topLeft. |
| getPopupContainer | function(trigger:Node):Node | () => document.body | Container which popup select menu rendered into. |
| dropdownMenuColumnStyle | Object | - | Style object for each cascader pop menu. |
| fieldNames | Object | { label: 'label', value: 'value', children: 'children' } | Custom field name for label and value and children. |
| expandIcon | ReactNode | > | Specific the default expand icon. |
| loadingIcon | ReactNode | > | Specific the default loading icon. |
| hidePopupOnSelect | Boolean | true | Hide popup on select. |
| showSearch | boolean | object | false | Whether show search input in single mode. |

### showSearch Props

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when checkable | boolean | true | |
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | |
| limit | Set the count of filtered items | number | false | 50 | |
| matchInputWidth | Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779)) | boolean | true | |
| render | Used to render filtered options | function(inputValue, path): ReactNode | - | |
| sort | Used to sort filtered options | function(a, b, inputValue) | - | |
| searchValue | The current input "search" text | string | - | - |
| onSearch | Called when input changed | function | - | - |
```

--------------------------------

### Generate Code Coverage Report

Source: https://github.com/react-component/cascader/blob/master/README.md

Generates a code coverage report for the project using the npm run coverage command. This helps in identifying areas of the codebase that are not adequately tested.

```bash
npm run coverage
```

--------------------------------

### Multiple Selection Cascader with Dynamic Loading (React)

Source: https://context7.com/react-component/cascader/llms.txt

Implements a multi-selection Cascader in React using checkboxes. It supports dynamic data loading via the `loadData` prop and customizes the display of checked items using `showCheckedStrategy`. The `changeOnSelect` prop allows selecting options at any level.

```tsx
import React, { useState } from 'react';
import Cascader from '@rc-component/cascader';
import type { CascaderProps } from '@rc-component/cascader';

const { SHOW_CHILD } = Cascader;

const optionLists = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
    disableCheckbox: true,
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
    disableCheckbox: false,
  },
];

const Demo = () => {
  const [options, setOptions] = useState(optionLists);
  const [value, setValue] = useState<string[][]>([]);

  const onChange: CascaderProps<any, 'value', true>['onChange'] = (value, selectedOptions) => {
    console.log(value, selectedOptions);
    // value: [['jiangsu', 'dynamic1'], ['jiangsu', 'dynamic2']]
    // selectedOptions: [[{label: 'Jiangsu', ...}, {label: 'Jiangsu Dynamic 1', ...}], ...]
    setValue(value);
  };

  const loadData: CascaderProps['loadData'] = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = [
        {
          label: `${targetOption.label} Dynamic 1`,
          value: 'dynamic1',
          disableCheckbox: false,
        },
        {
          label: `${targetOption.label} Dynamic 2`,
          value: 'dynamic2',
          disableCheckbox: true,
        },
      ];
      setOptions([...options]);
    }, 1000);
  };

  return (
    <Cascader
      checkable
      options={options}
      showCheckedStrategy={SHOW_CHILD}
      loadData={loadData}
      value={value}
      onChange={onChange}
      changeOnSelect
    />
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.