@rc-component/cascader

React Cascader Component.

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

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

Usage

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

API

props

showSearch

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

option

Development

$ npm install
$ npm start

Test Case

$ npm test

Coverage

$ npm run coverage

License

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

🤝 Contributing