`MoleculeDropdownList` is a composition of DropdownOptions
npm install @s-ui/react-molecule-dropdown-listMoleculeDropdownList is a composition of DropdownOptions





``sh`
$ npm install @s-ui/react-molecule-dropdown-list --save
`js
import MoleculeDropdownList, {
moleculeDropdownListSizes
} from '@s-ui/react-molecule-dropdown-list'
const countries = [
'Canary Islands',
'Australia',
'Northern Mariana Islands',
'Equatorial Guinea'
]
`
`js`
{countries.map((option, index) => (
key={index}
selected={option === 'Canary Islands'}
>
{option}
))}
`js`
{countries.map((option, index) => (
key={index}
selected={option === 'Canary Islands'}
>
{option}
))}
`js`
{countries.map((option, index) => (
key={index}
selected={option === 'Canary Islands'}
>
{option}
))}
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
onSelect={moleculeDropdownListSelectHandler.single(
{
value: 'option1',
onSelect: (event, {value, selected}) => console.log({value, selected})
})
}
>
{countries.map((option, index) => (
key={index}
>
{option}
))}
// Multiple
onSelect={moleculeDropdownListSelectHandler.multiple(
{
value: ['option1', 'option2'],
onSelect: (event, {value, selected}) => console.log({value, selected})
})
}
>
{countries.map((option, index) => (
key={index}
>
{option}
))}
> Find full description and more examples in the demo page.