@rc-component/cascader

React Cascader Component.

Browser Support

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /><br>IE / Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" /><br>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

<table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">name</th> <th style="width: 50px;">type</th> <th style="width: 50px;">default</th> <th>description</th> </tr> </thead> <tbody> <tr> <td>options</td> <td>Object</td> <td></td> <td>The data options of cascade</td> </tr> <tr> <td>value</td> <td>Array</td> <td></td> <td>selected value</td> </tr> <tr> <td>defaultValue</td> <td>Array</td> <td></td> <td>initial selected value</td> </tr> <tr> <td>onChange</td> <td>Function(value, selectedOptions)</td> <td></td> <td>callback when finishing cascader select</td> </tr> <tr> <td>changeOnSelect</td> <td>Boolean</td> <td>false</td> <td>change value on each selection</td> </tr> <tr> <td>loadData</td> <td>Function(selectedOptions)</td> <td></td> <td>callback when click any option, use for loading more options</td> </tr> <tr> <td>expandTrigger</td> <td>String</td> <td>'click'</td> <td>expand current item when click or hover</td> </tr> <tr> <td>open</td> <td>Boolean</td> <td></td> <td>visibility of popup overlay</td> </tr> <tr> <td>onPopupVisibleChange</td> <td>Function(visible)</td> <td></td> <td>callback when popup overlay's visibility changed</td> </tr> <tr> <td>transitionName</td> <td>String</td> <td></td> <td>transition className like "slide-up"</td> </tr> <tr> <td>prefixCls</td> <td>String</td> <td>rc-cascader</td> <td>prefix className of popup overlay</td> </tr> <tr> <td>popupClassName</td> <td>String</td> <td></td> <td>additional className of popup overlay</td> </tr> <tr> <td>popupPlacement</td> <td>String</td> <td>bottomLeft</td> <td>use preset popup align config from builtinPlacements：bottomRight topRight bottomLeft topLeft</td> </tr> <tr> <td>getPopupContainer</td> <td>function(trigger:Node):Node</td> <td>() => document.body</td> <td>container which popup select menu rendered into</td> </tr> <tr> <td>dropdownMenuColumnStyle</td> <td>Object</td> <td></td> <td>style object for each cascader pop menu</td> </tr> <tr> <td>fieldNames</td> <td>Object</td> <td>{ label: 'label', value: 'value', children: 'children' }</td> <td>custom field name for label and value and children</td> </tr> <tr> <td>expandIcon</td> <td>ReactNode</td> <td>></td> <td>specific the default expand icon</td> </tr> <tr> <td>loadingIcon</td> <td>ReactNode</td> <td>></td> <td>specific the default loading icon</td> </tr> <tr> <td>hidePopupOnSelect</td> <td>Boolean</td> <td>>true</td> <td>hide popup on select</td> </tr> <tr> <td>showSearch</td> <td>boolean | object</td> <td>false</td> <td>Whether show search input in single mode</td> </tr> </tbody> </table>

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

Cascader

Install / Use

README