Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-native-element-dropdown
Advanced tools
React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications.
React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications. This library simplifies the process of creating dropdown menus and provides a variety of options to customize the dropdown to match the design and functionality of your application.
If you love this library, give us a star, you will be a ray of sunshine in our lives :)
React Native Template with a beautiful UI.
npm install react-native-element-dropdown --save
or
yarn add react-native-element-dropdown
Props | Params | isRequire | Description |
---|---|---|---|
mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. |
data | Array | Yes | Data is a plain array |
labelField | String | Yes | Extract the label from the data item |
valueField | String | Yes | Extract the primary key from the data item |
searchField | String | No | Specify the field of data list you want to search |
onChange | (item: object) => void | Yes | Selection callback |
onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes |
value | Item | No | Set default value |
placeholder | String | No | The string that will be rendered before dropdown has been selected |
placeholderStyle | TextStyle | No | Styling for text placeholder |
selectedTextStyle | TextStyle | No | Styling for selected text |
selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} |
style | ViewStyle | No | Styling for view container |
containerStyle | ViewStyle | No | Styling for list container |
maxHeight | Number | No | Customize max height for list container |
minHeight | Number | No | Customize min height for list container |
fontFamily | String | No | Customize font style |
iconStyle | ImageStyle | No | Styling for icon |
iconColor | String | No | Color of icons |
itemContainerStyle | TextStyle | No | Styling for item container in list |
itemTextStyle | TextStyle | No | Styling for text item in list |
activeColor | String | No | Background color for item selected in list container |
search | Boolean | No | Show or hide input search |
searchQuery | (keyword: string, labelValue: string) => Boolean | No | Callback used to filter the list of items |
inputSearchStyle | ViewStyle | No | Styling for input search |
searchPlaceholder | String | No | The string that will be rendered before text input has been entered |
searchPlaceholderTextColor | String | No | The text color of the placeholder string |
renderInputSearch | (onSearch: (text:string) => void) => JSX.Element | No | Customize TextInput search |
disable | Boolean | No | Specifies the disabled state of the Dropdown |
dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' |
autoScroll | Boolean | No | Auto scroll to index item selected, default is true |
showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true |
renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown |
renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown |
renderItem | (item: object, selected: Boolean) => JSX.Element | No | Takes an item from data and renders it into the list |
flatListProps | FlatListProps | No | Customize FlatList element |
inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true |
onFocus | () => void | No | Callback that is called when the dropdown is focused |
onBlur | () => void | No | Callback that is called when the dropdown is blurred |
keyboardAvoiding | Boolean | No | keyboardAvoiding default is true |
backgroundColor | String | No | Set background color |
confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example3 |
onConfirmSelectItem | (item: object) => void | No | Selection callback. Refer example/src/dropdown/example3 |
testID | String | No | Used to locate this view in end-to-end tests |
itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}] |
accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected |
itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}] |
closeModalWhenSelectedItem | Boolean | No | By default, closeModalWhenSelectedItem is set to true. When closeModalWhenSelectedItem is set to false, the Modal won't close when an item is selected. |
excludeItems | Item[] | No | The array containing the items to be excluded. |
excludeSearchItems | Item[] | No | The array containing the items to be excluded. |
Props | Params | isRequire | Description |
---|---|---|---|
mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. |
data | Array | Yes | Data is a plain array |
labelField | String | Yes | Extract the label from the data item |
valueField | String | Yes | Extract the primary key from the data item |
searchField | String | No | Specify the field of data list you want to search |
onChange | (value[]) => void | Yes | Selection callback. A array containing the "valueField". |
onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes |
value | Item[] | No | Set default value. A array containing the "valueField". |
placeholder | String | No | The string that will be rendered before dropdown has been selected |
placeholderStyle | TextStyle | No | Styling for text placeholder |
style | ViewStyle | No | Styling for view container |
containerStyle | ViewStyle | No | Styling for list container |
maxHeight | Number | No | Customize max height for list container |
minHeight | Number | No | Customize min height for list container |
maxSelect | Number | No | maximum number of items that can be selected |
fontFamily | String | No | Customize font style |
iconStyle | ImageStyle | No | Styling for icon |
iconColor | String | No | Color of icons |
activeColor | String | No | Background color for item selected in list container |
itemContainerStyle | TextStyle | No | Styling for item container in list |
itemTextStyle | TextStyle | No | Styling for text item in list |
selectedStyle | ViewStyle | No | Styling for selected view |
selectedTextStyle | TextStyle | No | Styling for selected text |
selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} |
renderSelectedItem | (item: object, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected |
alwaysRenderSelectedItem | Boolean | No | Always show the list of selected items |
visibleSelectedItem | Boolean | No | Option to hide selected item list, Ẽx: visibleSelectedItem={false} |
search | Boolean | No | Show or hide input search |
searchQuery | (keyword: string, labelValue: string) => Boolean | No | Callback used to filter the list of items |
inputSearchStyle | ViewStyle | No | Styling for input search |
searchPlaceholder | String | No | The string that will be rendered before text input has been entered |
searchPlaceholderTextColor | String | No | The text color of the placeholder string |
renderInputSearch | (onSearch: (text:string) => void) => JSX.Element | No | Customize TextInput search |
disable | Boolean | No | Specifies the disabled state of the Dropdown |
dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' |
showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true |
renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown |
renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown |
renderItem | (item: object, selected: Boolean) => JSX.Element | No | Takes an item from data and renders it into the list |
flatListProps | FlatListProps | No | Customize FlatList element |
inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true |
onFocus | () => void | No | Callback that is called when the dropdown is focused |
onBlur | () => void | No | Callback that is called when the dropdown is blurred |
keyboardAvoiding | Boolean | No | keyboardAvoiding default is true |
inside | Boolean | No | inside default is false |
backgroundColor | String | No | Set background color |
confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 |
confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 |
onConfirmSelectItem | (item: any) => void | No | Selection callback. Refer example/src/dropdown/example7 |
testID | String | No | Used to locate this view in end-to-end tests |
itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}] |
accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected |
itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}] |
excludeItems | Item[] | No | The array containing the items to be excluded. |
excludeSearchItems | Item[] | No | The array containing the items to be excluded. |
Props | Params | isRequire | Description |
---|---|---|---|
imageField | String | Yes | Extract the image from the data item |
imageStyle | ImageStyle | No | Styling for image |
API | Params | Description |
---|---|---|
open | () => void | Open dropdown list |
close | () => void | Close dropdown list |
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import AntDesign from '@expo/vector-icons/AntDesign';
const data = [
{ label: 'Item 1', value: '1' },
{ label: 'Item 2', value: '2' },
{ label: 'Item 3', value: '3' },
{ label: 'Item 4', value: '4' },
{ label: 'Item 5', value: '5' },
{ label: 'Item 6', value: '6' },
{ label: 'Item 7', value: '7' },
{ label: 'Item 8', value: '8' },
];
const DropdownComponent = () => {
const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false);
const renderLabel = () => {
if (value || isFocus) {
return (
<Text style={[styles.label, isFocus && { color: 'blue' }]}>
Dropdown label
</Text>
);
}
return null;
};
return (
<View style={styles.container}>
{renderLabel()}
<Dropdown
style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={data}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder={!isFocus ? 'Select item' : '...'}
searchPlaceholder="Search..."
value={value}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={item => {
setValue(item.value);
setIsFocus(false);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color={isFocus ? 'blue' : 'black'}
name="Safety"
size={20}
/>
)}
/>
</View>
);
};
export default DropdownComponent;
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 16,
},
dropdown: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
},
icon: {
marginRight: 5,
},
label: {
position: 'absolute',
backgroundColor: 'white',
left: 22,
top: 8,
zIndex: 999,
paddingHorizontal: 8,
fontSize: 14,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import AntDesign from '@expo/vector-icons/AntDesign';
const data = [
{ label: 'Item 1', value: '1' },
{ label: 'Item 2', value: '2' },
{ label: 'Item 3', value: '3' },
{ label: 'Item 4', value: '4' },
{ label: 'Item 5', value: '5' },
{ label: 'Item 6', value: '6' },
{ label: 'Item 7', value: '7' },
{ label: 'Item 8', value: '8' },
];
const DropdownComponent = () => {
const [value, setValue] = useState(null);
return (
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={data}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select item"
searchPlaceholder="Search..."
value={value}
onChange={item => {
setValue(item.value);
}}
renderLeftIcon={() => (
<AntDesign style={styles.icon} color="black" name="Safety" size={20} />
)}
/>
);
};
export default DropdownComponent;
const styles = StyleSheet.create({
dropdown: {
margin: 16,
height: 50,
borderBottomColor: 'gray',
borderBottomWidth: 0.5,
},
icon: {
marginRight: 5,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
import React, { useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import AntDesign from '@expo/vector-icons/AntDesign';
const data = [
{ label: 'Item 1', value: '1' },
{ label: 'Item 2', value: '2' },
{ label: 'Item 3', value: '3' },
{ label: 'Item 4', value: '4' },
{ label: 'Item 5', value: '5' },
{ label: 'Item 6', value: '6' },
{ label: 'Item 7', value: '7' },
{ label: 'Item 8', value: '8' },
];
const DropdownComponent = () => {
const [value, setValue] = useState(null);
const renderItem = item => {
return (
<View style={styles.item}>
<Text style={styles.textItem}>{item.label}</Text>
{item.value === value && (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
</View>
);
};
return (
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={data}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder="Select item"
searchPlaceholder="Search..."
value={value}
onChange={item => {
setValue(item.value);
}}
renderLeftIcon={() => (
<AntDesign style={styles.icon} color="black" name="Safety" size={20} />
)}
renderItem={renderItem}
/>
);
};
export default DropdownComponent;
const styles = StyleSheet.create({
dropdown: {
margin: 16,
height: 50,
backgroundColor: 'white',
borderRadius: 12,
padding: 12,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
icon: {
marginRight: 5,
},
item: {
padding: 17,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
textItem: {
flex: 1,
fontSize: 16,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { MultiSelect } from 'react-native-element-dropdown';
import AntDesign from '@expo/vector-icons/AntDesign';
const data = [
{ label: 'Item 1', value: '1' },
{ label: 'Item 2', value: '2' },
{ label: 'Item 3', value: '3' },
{ label: 'Item 4', value: '4' },
{ label: 'Item 5', value: '5' },
{ label: 'Item 6', value: '6' },
{ label: 'Item 7', value: '7' },
{ label: 'Item 8', value: '8' },
];
const MultiSelectComponent = () => {
const [selected, setSelected] = useState([]);
return (
<View style={styles.container}>
<MultiSelect
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
search
data={data}
labelField="label"
valueField="value"
placeholder="Select item"
searchPlaceholder="Search..."
value={selected}
onChange={item => {
setSelected(item);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
selectedStyle={styles.selectedStyle}
/>
</View>
);
};
export default MultiSelectComponent;
const styles = StyleSheet.create({
container: { padding: 16 },
dropdown: {
height: 50,
backgroundColor: 'transparent',
borderBottomColor: 'gray',
borderBottomWidth: 0.5,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 14,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
icon: {
marginRight: 5,
},
selectedStyle: {
borderRadius: 12,
},
});
import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { MultiSelect } from 'react-native-element-dropdown';
import AntDesign from '@expo/vector-icons/AntDesign';
const data = [
{ label: 'Item 1', value: '1' },
{ label: 'Item 2', value: '2' },
{ label: 'Item 3', value: '3' },
{ label: 'Item 4', value: '4' },
{ label: 'Item 5', value: '5' },
{ label: 'Item 6', value: '6' },
{ label: 'Item 7', value: '7' },
{ label: 'Item 8', value: '8' },
];
const MultiSelectComponent = () => {
const [selected, setSelected] = useState([]);
const renderItem = item => {
return (
<View style={styles.item}>
<Text style={styles.selectedTextStyle}>{item.label}</Text>
<AntDesign style={styles.icon} color="black" name="Safety" size={20} />
</View>
);
};
return (
<View style={styles.container}>
<MultiSelect
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={data}
labelField="label"
valueField="value"
placeholder="Select item"
value={selected}
search
searchPlaceholder="Search..."
onChange={item => {
setSelected(item);
}}
renderLeftIcon={() => (
<AntDesign
style={styles.icon}
color="black"
name="Safety"
size={20}
/>
)}
renderItem={renderItem}
renderSelectedItem={(item, unSelect) => (
<TouchableOpacity onPress={() => unSelect && unSelect(item)}>
<View style={styles.selectedStyle}>
<Text style={styles.textSelectedStyle}>{item.label}</Text>
<AntDesign color="black" name="delete" size={17} />
</View>
</TouchableOpacity>
)}
/>
</View>
);
};
export default MultiSelectComponent;
const styles = StyleSheet.create({
container: { padding: 16 },
dropdown: {
height: 50,
backgroundColor: 'white',
borderRadius: 12,
padding: 12,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 14,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
icon: {
marginRight: 5,
},
item: {
padding: 17,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
selectedStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 14,
backgroundColor: 'white',
shadowColor: '#000',
marginTop: 8,
marginRight: 12,
paddingHorizontal: 12,
paddingVertical: 8,
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
textSelectedStyle: {
marginRight: 5,
fontSize: 16,
},
});
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { SelectCountry } from 'react-native-element-dropdown';
const local_data = [
{
value: '1',
lable: 'Country 1',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '2',
lable: 'Country 2',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '3',
lable: 'Country 3',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '4',
lable: 'Country 4',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '5',
lable: 'Country 5',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
];
const SelectCountryScreen = _props => {
const [country, setCountry] = useState('1');
return (
<SelectCountry
style={styles.dropdown}
selectedTextStyle={styles.selectedTextStyle}
placeholderStyle={styles.placeholderStyle}
imageStyle={styles.imageStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
search
maxHeight={200}
value={country}
data={local_data}
valueField="value"
labelField="lable"
imageField="image"
placeholder="Select country"
searchPlaceholder="Search..."
onChange={e => {
setCountry(e.value);
}}
/>
);
};
export default SelectCountryScreen;
const styles = StyleSheet.create({
dropdown: {
margin: 16,
height: 50,
borderBottomColor: 'gray',
borderBottomWidth: 0.5,
},
imageStyle: {
width: 24,
height: 24,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
marginLeft: 8,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { SelectCountry } from 'react-native-element-dropdown';
const local_data = [
{
value: '1',
lable: 'Country 1',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '2',
lable: 'Country 2',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '3',
lable: 'Country 3',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '4',
lable: 'Country 4',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
{
value: '5',
lable: 'Country 5',
image: {
uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',
},
},
];
const SelectCountryScreen = _props => {
const [country, setCountry] = useState('1');
return (
<SelectCountry
style={styles.dropdown}
selectedTextStyle={styles.selectedTextStyle}
placeholderStyle={styles.placeholderStyle}
imageStyle={styles.imageStyle}
iconStyle={styles.iconStyle}
maxHeight={200}
value={country}
data={local_data}
valueField="value"
labelField="lable"
imageField="image"
placeholder="Select country"
searchPlaceholder="Search..."
onChange={e => {
setCountry(e.value);
}}
/>
);
};
export default SelectCountryScreen;
const styles = StyleSheet.create({
dropdown: {
margin: 16,
height: 50,
width: 150,
backgroundColor: '#EEEEEE',
borderRadius: 22,
paddingHorizontal: 8,
},
imageStyle: {
width: 24,
height: 24,
borderRadius: 12,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
marginLeft: 8,
},
iconStyle: {
width: 20,
height: 20,
},
});
FAQs
React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications.
The npm package react-native-element-dropdown receives a total of 63,453 weekly downloads. As such, react-native-element-dropdown popularity was classified as popular.
We found that react-native-element-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.