
Research
/Security News
Contagious Interview Campaign Escalates With 67 Malicious npm Packages and New Malware Loader
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
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"
className="my-className"
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 |
---|---|
rdn | main wrapper div |
rdn-control | dropdown control |
rdn-control-arrow | dropdown arrow indicator |
rdn-control-placeholder | placeholder / selected item in dropdown control |
rdn-drop | container for dropdown options |
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 stories folder.
placeholderClassName
, arrowClassName
, menuClassName
and controlClassName
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.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.