React components that focus on handling multiple selector cascading relationships

Documentation

https://shianqi.github.io/rc-multi-level-selector/

Installation

Install rc-multi-level-selector as a dependency

# Yarn
$ yarn add rc-multi-level-selector

# NPM
$ npm install --save rc-multi-level-selector

Props

These are all of the available props (and their default values) for the main <MultiLevelSelector /> component.

|key|type|default value|description| |---|---|---|---| | className? | string | '' | Apply a className to the control | | selectorClassName? | string | '' | Apply classNames to Selector elements | | options | object[] | object | [] | Specify the options the user can select from | | values? | string[] | [] | Control the current values | | defaultValues? | string[] | [] | The initial value passed to the uncontrolled component | | onChange? | function | () => {} | Subscribe to change events | | optionFormat? | function | (option) => (option) | Custom subcomponent options | | Selector? | function | object | NativeSelector | Use a custom selector component | | getOptionsKey? | function | (option, value, index) => (value + '-' + index) | Get keys to help React identify which items have changed | | autoSelect? | bool | true | Automatically select optional options | | nullOption? | object | {id: 'NULL', value: 'NULL', display: true} | If autoSelect is false, selected empty object |

Example

import MultiLevelSelector from 'rc-multi-level-selector'

const options = [
  {
    id: 'China', value: 'China',
    items: [
      {
        id: 'Guangdong', value: 'Guangdong',
        items: [
          { id: 'Guangzhou', value: 'Guangzhou' },
          { id: 'Shenzhen', value: 'Shenzhen' }
        ]
      },
      { id: 'Beijing', value: 'Beijing', text: 'China - Beijing' }
    ]
  },
  {
    id: 'United States', value: 'United States',
    items: [{ id: 'California', value: 'California' }]
  }
]

...
<MultiLevelSelector
  options={options}
/>
...

Try it on CodeSandbox

License

MIT