
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
react-dropdown-select
Advanced tools
Customisable dropdown select for react
prop
sdocument.body
npm install --save react-dropdown-select
react-select is very nice, but sometimes project requerements are beyond it's abilities
import:
import Select from "react-dropdown-select";
and use as:
<Select options={options} onChange={(values) => this.setValues(values)} />
options and onChange are the minimum required props
Props | Type | Default | Description |
---|---|---|---|
Component props | |||
values | array | [] | Selected values |
options | array | [] | Available options, (option with key disabled: true will be disabled) |
keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) |
dropdownGap | number | 5 | Gap between select element and dropdown |
multi | bool | false | If true - will act as multi-select, if false - only one option will be selected at the time |
placeholder | string | "Select..." | Placeholder shown where there are no selected values |
addPlaceholder | string | "+" | Secondary placeholder on search field if any value selected |
disabled | bool | false | Disable select and all interactions |
style | object | {} | style object to pass to select |
className | string | CSS class attribute to pass to select | |
loading | bool | false | loading indicator |
clearable | bool | false | Clear all indicator |
searchable | bool | true | If true, select will have search input text |
separator | bool | false | Separator line between close all and dropdown handle |
dropdownHandle | bool | true | dropdown handle to open/close dropdown |
dropdownHeight | string | "300px" | min-height of a dropdown |
searchBy | string | label | search by object property in values |
labelField | string | "label" | field in data to use for label |
valueField | string | "value" | field in data to use for value |
color | string | "#0074D9" | base color to use in component, also can be overwritten via CSS |
closeOnScroll | bool | false | If true, scrolling the page will close the dropdown |
closeOnSelect | bool | false | If true, selecting option will close the dropdown |
openOnTop | bool | false | If true, dropdown will open on top of the select |
keepSelectedInList | bool | true | If false, selected item will not appear in a list |
portal | DOM element | false | If valid dom element specified - dropdown will break out to render inside the specified element |
create | bool | false | If true, select will create value from search string and fire onCreateNew callback prop |
createNewLabel | string | 'add {search}' | If create set to true, this will be the label of the "add new" component. {search} will be replaced by search value |
Callback props | |||
onChange | func | On values change callback, returns array of values objects | |
onDropdownClose | func | fires upon dropdown close | |
onDropdownOpen | func | fires upon dropdown open | |
onCreateNew | func | fires upon creation of new item if create prop set to true | |
onClearAll | func | fires upon clearing all values (via custom renderers) | |
onSelectAll | func | fires upon selecting all values (via custom renderers) | |
contentRenderer | func | Overrides internal content component (the contents of the select component) | |
itemRenderer | func | Overrides internal item in a dropdown | |
noDataRenderer | func | Overrides internal "no data" (shown where search has no results) | |
optionRenderer | func | Overrides internal option (the pillow with an "x") on the select content | |
inputRenderer | func | Overrides internal input text | |
loadingRenderer | func | Overrides internal loading | |
clearRenderer | func | Overrides internal clear button | |
separatorRenderer | func | Overrides internal separator | |
dropdownRenderer | func | Overrides internal dropdown component | |
dropdownHandleRenderer | func | Overrides internal dropdown handle |
FAQs
Customizable dropdown select for react
We found that react-dropdown-select 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.