react-multi-level-selector
v1.0.1
Published
Multi level dropdown options selector for application
Downloads
133
Maintainers
Readme
react-multi-level-selector
:bell: React component for Multi level options Selector for your application.
Installation
Install it from npm and import it in your root component
npm install --save react-multi-level-selector
Usage
import React from 'react';
import MultiLevelSelect from 'react-multi-level-selector';
const options = [
{ value: 'fruits', label: 'Fruits',
options: [
{ value: 'citrus', label: 'Citrus',
options: [
{ value: 'orange', label: 'Orange' },
{ value: 'grapefruits', label: 'GrapeFruits'},
],
},
{ value: 'tropical', label: 'Tropical',
options: [
{ value: 'mango', label: 'Mango' },
{ value: 'papaya', label: 'Papaya' },
],
},
{ value: 'berries', label: 'Berries',
options: [
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'raspberries', label: 'Raspberries' },
],
},
],
},
{ value: 'city', label: 'City',
options: [
{ value: 'dublin', label: 'Dublin' },
{ value: 'new york', label: 'New York' },
{ value: 'san fransis', label: 'San Fransis' },
],
},
function App() {
return (
<div>
<MultiLevelSelect
options={options}
/>
<div>This is a test application</div>
</div>
)
}
export default App;
Props
| Name | Type | Description |
| ----------------- | ------------ | ----------------------------------------------------------------------- |
| options
| {Array}
| Options for the dropdown. Specify the options for users to select from. |
| placeholder
| {String}
| The text displayed when no option is selected. |
| onChange
| {function}
| Subscribe to change events. |
| className
| {String}
| className to style the selector |