rc-cascader

What is rc-cascader?

The rc-cascader package is a React component for creating cascading drop-down menus. It allows users to select options from a hierarchical structure, which is useful for selecting nested categories or locations.

What are rc-cascader's main functionalities?

Basic Cascading Menu

This code sample demonstrates how to create a basic cascading menu with the rc-cascader package. The 'options' array defines the hierarchical structure of the menu, and the 'onChange' function logs the selected value.

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

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

function onChange(value) {
  console.log(value);
}

const App = () => (
  <Cascader options={options} onChange={onChange} />
);

export default App;

Custom Trigger

This code sample shows how to use a custom trigger, such as a button, to open the cascading menu. The children of the Cascader component determine the trigger element.

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

const options = [/* ... */];

const App = () => (
  <Cascader options={options}>
    <button>Click me to select</button>
  </Cascader>
);

export default App;

Search and Filter

This code sample illustrates how to enable a search and filter functionality within the cascading menu by setting the 'showSearch' prop to true. This allows users to quickly find options by typing.

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

const options = [/* ... */];

const App = () => (
  <Cascader options={options} showSearch />
);

export default App;

Other packages similar to rc-cascader

react-select

React-select is a flexible and customizable select input component for React. It supports single and multi-select options, as well as asynchronous loading of options. Compared to rc-cascader, react-select offers more customization and is not specifically designed for cascading options.

antd

Ant Design (antd) is a comprehensive UI design language and React UI library that includes a cascading menu component similar to rc-cascader. The Cascader component in antd is more integrated with the overall design system and may offer additional features and a more polished look.

README

rc-cascader

---

React Cascader Component

Browser Support

IE 8+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Screenshots

Development

npm install
npm start

Example

http://react-component.github.io/cascader/

Feature

• support ie8,ie8+,chrome,firefox,safari

Keyboard

install

Usage

var Cascader = require('rc-cascader');
var React = require('react');

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',
  }],
}];

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

API

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
onSelect	Function(selectedOptions, done)		callback when click any option, argument "done" use for async select
expandTrigger	String	'click'	expand current item when click or hover
popupVisible	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

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-cascader is released under the MIT license.