React Cascader Component.
 IE / Edge |  Firefox |  Chrome |  Safari |  Electron |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
https://cascader-react-component.vercel.app
$ npm install rc-cascader --saveimport 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);| 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 |
| 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) | 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 | - | - |
| name | type | default | description |
|---|---|---|---|
| label | String | option text to display | |
| value | String | option value as react key | |
| disabled | Boolean | disabled option | |
| children | Array | children options |
$ npm install $ npm start$ npm test$ npm run coveragerc-cascader is released under the MIT license.
