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

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

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

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

$ npm install
$ npm start

Test Case

$ npm test

Coverage

$ npm run coverage

License

rc-cascader is released under the MIT license.

🤝 Contributing