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-dropdown-now
Advanced tools
The demo page is here. react-dropdown-now is a fork of react-dropdown.
requires React >= 16.8
import Dropdown, { Selection } from 'react-dropdown-now';
import 'react-dropdown-now/style.css';
// normal usage
<Dropdown
placeholder="Select an option"
options={['one', 'two', 'three']}
value="one"
onChange={(value) => console.log('change!', value)}
onSelect={(value) => console.log('selected!', value)} // always fires once a selection happens even if there is no change
onClose={(closedBySelection) => console.log('closedBySelection?:', closedBySelection)}
onOpen={() => console.log('open!')}
/>;
// use the Selection component with other components like popovers etc.
<Selection
options={['one', 'two', 'three']}
value="one"
onChange={(value) => console.log('change!', value)}
/>;
Flat Array options
const options = [
'one', 'two', 'three'
];
Object Array options
const options = [
{ id: 'one', value: 'one', label: 'One', view: <span>One</span> },
{ value: 'two', label: 'Two', className: 'myOptionClassName' },
{
name: 'group1',
items: [
{ value: 'three', label: 'Three', className: 'myOptionClassName' },
{ value: 'four', label: 'Four' }
]
},
{
name: 'group2',
items: [
{ value: 'five', label: 'Five' },
{ value: 'six', label: 'Six' }
]
}
];
When using Object options you can add to each option:
className
string to further customize the dropdown, e.g. adding icons to optionsview
node to render an isolated view in the dropdown options list which is different from what could be seen in the dropdown control (selected value)id
string can be used to give an id to each option. Must be unique; even when mixing grouped options with single options. Useful for when option.value
is not a string
or number
. Can be used with a custom matcher to determine the selected option.Disabled
<Dropdown disabled option={options} value={defaultOption} />
matcher
The default matcher will use the value prop to match against values within the options array.
custom matcher example:
const value = 'custom-id';
const options = [{ id: 'custom-id', value: 1, label: 'awesome' }];
<Dropdown
option={options}
value={value}
matcher={(item, val) => {
// item => { id, option: {id, value, label} }
return item.id === val;
}}
/>;
Classname | Targets |
---|---|
Dropdown-root prop: className | main wrapper div |
Dropdown-control prop: controlClassName | the dropdown control |
Dropdown-placeholder prop: placeholderClassName | styles the placeholder / selected item in dropdown control |
Dropdown-menu prop: menuClassName | container for the dropdown options |
Dropdown-arrow prop: arrowClassName | dropdown arrow indicator |
arrowClosed, arrowOpen
The arrowClosed
& arrowOpen
props enable passing in custom elements for the open/closed state arrows.
<Dropdown
arrowClosed={<span className="arrow-closed" />}
arrowOpen={<span className="arrow-open" />} />;
More examples in the docs folder.
onChange
always returns an object with aleast {value, label}
option.type
is no longer needed to determine if the option is a group. Once the option has an items
array then it is assumed to be a group.MIT
FAQs
React dropdown component NOW
We found that react-dropdown-now demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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.