2.2.0 • Published 1 year ago
@s-ui/react-molecule-dropdown-list v2.2.0
MoleculeDropdownList
MoleculeDropdownList
is a composition of DropdownOptions
Installation
$ npm install @s-ui/react-molecule-dropdown-list --save
Usage
import MoleculeDropdownList, {
moleculeDropdownListSizes
} from '@s-ui/react-molecule-dropdown-list'
const countries = [
'Canary Islands',
'Australia',
'Northern Mariana Islands',
'Equatorial Guinea'
]
Basic usage
<MoleculeDropdownList visible={true}>
{countries.map((option, index) => (
<MoleculeDropdownOption
value={option}
key={index}
selected={option === 'Canary Islands'}
>
{option}
</MoleculeDropdownOption>
))}
</MoleculeDropdownList>
Specifying size
<MoleculeDropdownList visible={true} size={moleculeDropdownListSizes.LARGE}>
{countries.map((option, index) => (
<MoleculeDropdownOption
value={option}
key={index}
selected={option === 'Canary Islands'}
>
{option}
</MoleculeDropdownOption>
))}
</MoleculeDropdownList>
With checkbox
<MoleculeDropdownList visible={true} checkbox>
{countries.map((option, index) => (
<MoleculeDropdownOption
value={option}
key={index}
selected={option === 'Canary Islands'}
>
{option}
</MoleculeDropdownOption>
))}
</MoleculeDropdownList>
Single & Multiple Handler Helpers
The package also provides an easy handler configuration for single or multiple selection behaviors
import MoleculeDropdownList, { moleculeDropdownListSelectHandler } from '@s-ui/react-molecule-dropdown-list';
// Single
<MoleculeDropdownList
visible={true}
onSelect={moleculeDropdownListSelectHandler.single(
{
value: 'option1',
onSelect: (event, {value, selected}) => console.log({value, selected})
})
}
>
{countries.map((option, index) => (
<MoleculeDropdownOption
value={option}
key={index}
>
{option}
</MoleculeDropdownOption>
))}
</MoleculeDropdownList>
// Multiple
<MoleculeDropdownList
visible={true}
onSelect={moleculeDropdownListSelectHandler.multiple(
{
value: ['option1', 'option2'],
onSelect: (event, {value, selected}) => console.log({value, selected})
})
}
>
{countries.map((option, index) => (
<MoleculeDropdownOption
value={option}
key={index}
>
{option}
</MoleculeDropdownOption>
))}
</MoleculeDropdownList>
Find full description and more examples in the demo page.
2.2.0
1 year ago
2.1.0
2 years ago
1.33.0
2 years ago
1.32.0
2 years ago
1.30.0
2 years ago
1.31.0
2 years ago
1.29.0
2 years ago
1.27.0
2 years ago
1.28.0
2 years ago
1.26.0
2 years ago
1.25.0
2 years ago
1.22.0
2 years ago
1.23.0
2 years ago
1.24.0
2 years ago
1.21.0
3 years ago
1.20.0
3 years ago
1.19.0
3 years ago
1.18.0
3 years ago
1.17.0
3 years ago
1.16.0
3 years ago
1.15.0
4 years ago
1.14.0
4 years ago
1.13.0
4 years ago
1.12.0
4 years ago
1.11.0
4 years ago
1.10.0
4 years ago
1.9.0
4 years ago
1.8.0
4 years ago
1.7.0
5 years ago
1.6.0
5 years ago
1.5.0
5 years ago
1.4.0
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago