Rc-multi-level-selector NPM

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