The npm-native-dropdown package provides a versatile and customizable dropdown component for React applications. With this package, you can easily integrate dropdown menus into your UI, offering users a seamless way to select options from a list.
Install my-project with npm
npm install npm-native-dropdown
cd my-project
or
yarn add npm-native-dropdown
cd my-project
- Easy to use
- Single or Multiselect option for items
- Responsive for Cross platform
- Have wast option for customization
- Implemented with typescript
const options = [
"Heart",
"Thumbs Up",
"Star",
"Smiley",
];
import DropdownMenu from 'npm-native-dropdown';
<DropdownMenu
placeHolder={selected ? selected : 'Select Option'}
options={options}
onSelect={(selectedItem: string, index: number) => {
console.log('>>>', selectedItem, index);
}}
/>
<DropdownMenu
options={options}
onSelect={(selectedItem: string, index: number) => {
console.log('>>>', selectedItem, index);
}}
renderButton={(buttonRef, toggleMenu) => {
return (
<TouchableOpacity style={[$button]} ref={buttonRef} onPress={toggleMenu}>
<Text>{selected ? selected : 'Select'}</Text>
</TouchableOpacity>
)
}}
renderItem={(setIsMenuOpen: () => any) => {
return options.map((option, index) => {
return (<TouchableOpacity
key={index}
onPress={() => {setIsMenuOpen(),setSelected(option)}}
style={[$menuItem(options?.length === index + 1)]}
>
<Text style={[$textStyle]}>{option} </Text>
</TouchableOpacity>)
})
}}
/>
const $menuItem = (isLast: boolean): ViewStyle => ({
padding: 12,
flex: 1,
paddingVertical: 8,
width: 200,
borderBottomWidth: isLast ? 0 : 0.5,
borderColor: 'gray',
alignItems: 'center'
})
const $textStyle: TextStyle = {
fontSize: 16,
fontWeight: '400',
color: 'green'
}
const $button: TextStyle = {
backgroundColor: '#e1ecf7',
height: 44,
width: 200,
borderColor: '#71a5de',
borderWidth: 1,
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
}
<DropdownMenu
placeHolder={selected ? selected : 'Select Option'}
options={options}
onSelect={(selectedItem: string, index: number) => {
console.log('>>>', selectedItem, index);
}}
leftRenderIcon={
<Image
style={$tinyLogo}
source={{
uri: 'https://image.png',
}}
/>
}
rightRenderIcon={
<Image
style={$tinyLogo}
source={{
uri: 'https://image.png',
}}
/>
}
/>
const $tinyLogo: ImageStyle = {
width: 20,
height: 20,
}
Props | Params | isRequire | Description |
---|---|---|---|
options |
string[] |
Yes | Plain array containing dropdown options. |
rightRenderIcon |
ReactElement |
No | Custom component to be used as the dropdown icon. |
placeHolder |
string |
No | Placeholder text when no option is selected. |
onSelect |
(option: string, index: number) => void |
Yes | function recieves selected item and its index in data array |
disabled |
boolean |
No | disable dropdown |
buttonStyle |
ViewStyle |
No | style object for dropdown Button. |
placeHolderTextStyle |
TextStyle |
No | style object for dropdown placeholder Text. |
contentStyle |
ViewStyle |
No | style object for dropdown content. |
menuItemStyle |
ViewStyle |
No | style object for dropdown menu items. |
optionStyle |
TextStyle |
No | style object for dropdown options. |
leftRenderIcon |
JSX.Element |
No | Custom component to be used as the dropdown icon. |
renderItem |
JSX.Element |
No | React component for each dropdown item. |
renderButton |
JSX.Element |
No | React component for the dropdown button. |
dropDownWidth |
number |
No | dropdown width. |