MoleculeDropdownList

MoleculeDropdownList is a composition of DropdownOptions



Installation

``sh
$ npm install @s-ui/react-molecule-dropdown-list --save
`

Usage

`js
import MoleculeDropdownList, {
moleculeDropdownListSizes
} from '@s-ui/react-molecule-dropdown-list'

const countries = [
'Canary Islands',
'Australia',
'Northern Mariana Islands',
'Equatorial Guinea'
]
`

$3

`js

{countries.map((option, index) => (
value={option}
key={index}
selected={option === 'Canary Islands'}
>
{option}

))}

`

$3

`js

{countries.map((option, index) => (
value={option}
key={index}
selected={option === 'Canary Islands'}
>
{option}

))}

`

$3

`js

{countries.map((option, index) => (
value={option}
key={index}
selected={option === 'Canary Islands'}
>
{option}

))}

`

$3

The package also provides an easy handler configuration for single or multiple selection behaviors

`js
import MoleculeDropdownList, { moleculeDropdownListSelectHandler } from '@s-ui/react-molecule-dropdown-list';
// Single
visible={true}
onSelect={moleculeDropdownListSelectHandler.single(
{
value: 'option1',
onSelect: (event, {value, selected}) => console.log({value, selected})
})
}
>
{countries.map((option, index) => (
value={option}
key={index}
>
{option}

))}

// Multiple
visible={true}
onSelect={moleculeDropdownListSelectHandler.multiple(
{
value: ['option1', 'option2'],
onSelect: (event, {value, selected}) => console.log({value, selected})
})
}
>
{countries.map((option, index) => (
value={option}
key={index}
>
{option}

))}

``

> Find full description and more examples in the demo page.