@rc-component/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]: https://img.shields.io/npm/v/@rc-component/cascader.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@rc-component/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/actions/workflows/main.yml/badge.svg
[github-actions-url]: https://github.com/react-component/cascader/actions/workflows/main.yml
[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-component/cascader.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/cascader
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/cascader
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/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-component/cascader --save
`

Usage

`js
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(

...

, container);
`

API

$3

$3

| 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 | - | - |

$3

Development

`bash
$ npm install
$ npm start
`

Test Case

`bash
$ npm test
`

Coverage

`bash
$ npm run coverage
``

License

@rc-component/cascader is released under the MIT license.

🤝 Contributing