rc-multi-level-selector

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