Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gem-mine/rc-cascader

https://github.com/react-component/cascader
https://github.com/gem-mine/rc-cascader

Last synced: about 1 month ago
JSON representation

https://github.com/react-component/cascader

Host: GitHub
URL: https://github.com/gem-mine/rc-cascader
Owner: gem-mine
License: mit
Created: 2019-09-23T03:50:14.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-05-06T20:30:49.000Z (over 1 year ago)
Last Synced: 2024-04-13T19:06:05.402Z (9 months ago)
Language: TypeScript
Homepage:
Size: 1.94 MB
Stars: 0
Watchers: 5
Forks: 1
Open Issues: 7
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # rc-cascader

React Cascader Component

[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![Dependencies](https://img.shields.io/david/react-component/cascader.svg?style=flat-square)](https://david-dm.org/react-component/cascader) [![DevDependencies](https://img.shields.io/david/dev/react-component/cascader.svg?style=flat-square)](https://david-dm.org/react-component/cascader?type=dev) [![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-cascader.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rc-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://codecov.io/gh/react-component/cascader/branch/master

[download-image]: https://img.shields.io/npm/dm/rc-cascader.svg?style=flat-square

[download-url]: https://npmjs.org/package/rc-cascader

## Browser Support

|![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_7-8/internet-explorer_7-8_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)|

| --- | --- | --- | --- | --- |

| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

## Screenshots



## Example

http://react-component.github.io/cascader/

## Install

[![rc-cascader](https://nodei.co/npm/rc-cascader.png)](https://npmjs.org/package/rc-cascader)

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

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

    

    

      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

    

  

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

```bash

$ npm install

$ npm start

```

## Test Case

```bash

$ npm test

```

## Coverage

```bash

$ npm run coverage

```

## License

rc-cascader is released under the MIT license.