rc-cascader
v3.34.0TypeScript
cascade select ui component for react
0/weekUpdated 10 months agoMITUnpacked: 180.9 KB
Published by afc163@gmail.com
npm install rc-cascaderrc-cascader
React Cascader Component.
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]
[npm-image]: http://img.shields.io/npm/v/rc-cascader.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-cascader
[travis-image]: https://img.shields.io/travis/react-component/cascader/master?style=flat-square
[travis-url]: https://travis-ci.com/react-component/cascader
[github-actions-image]: https://github.com/react-component/cascader/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/cascader/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/cascader/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/cascader
[david-url]: https://david-dm.org/react-component/cascader
[david-image]: https://david-dm.org/react-component/cascader/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/cascader?type=dev
[david-dev-image]: https://david-dm.org/react-component/cascader/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-cascader.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-cascader
[bundlephobia-url]: https://bundlephobia.com/package/rc-cascader
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-cascader
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
Browser Support
| 
IE / Edge | 
Firefox | 
Chrome | 
Safari | 
Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Screenshots
Example
https://cascader-react-component.vercel.app
Install
``bash`
$ npm install rc-cascader --save
Usage
`js
import React from 'react';
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',
}],
}];
React.render(
...
, container);
`
API
$3
| name | type | default | description |
|---|---|---|---|
| autoClearSearchValue | boolean | true | Whether the current search will be cleared on selecting an item. Only applies when checkable |
| 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 | |
| onDropdownVisibleChange | 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 |
| dropdownClassName | 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 |
$3
| 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 |
Development
`bash`
$ npm install
$ npm start
Test Case
`bash`
$ npm test
Coverage
`bash``
$ npm run coverage
License
rc-cascader is released under the MIT license.