npmpackage.info

Gathering detailed insights and metrics for react-dropdown-select

Other packages similar to react-dropdown-select

react-dropdown-tree-select

2.8.0

Lightweight, customizable and fast Dropdown Tree Select component for React

react-native-select-dropdown

4.0.1

react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

react-dropdown

1.11.0

React dropdown component

@react-native-picker/picker

2.11.0

React Native Picker for iOS, Android, macOS, and Windows

react-dropdown-select

Customisable dropdown select for react

4.11.4

356

MIT

JavaScript

17.08 kB

5,867,895 3.1

Installations

npm install react-dropdown-select

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.20.5

NPM Version

10.8.2 Score

81.1

Supply Chain

84.9

Quality

77.5

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

8

Total

141

Closed

29

Merged

104

Issues

Open

17

Total

180

Closed

163

Releases

update types

v4.11.2

Published on 20 Feb 2024

"Select All" feature

v4.10.0

Published on 25 Jul 2023

Update emotion to latest

v4.9.4

Published on 19 Jun 2023

v4.9.2

Published on 31 Dec 2022

Update packages and docs build

v4.9.1

Published on 27 May 2022

Update packages and docs build

v4.9.0

Published on 27 May 2022

View all 7 releases

Contributors

Unable to fetch Contributors

View all 19 contributors

Languages

JavaScript

MDX

Shell

HTML

JavaScript (98.78%)

MDX (0.53%)

Shell (0.49%)

HTML (0.21%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

sanusart

Download Statistics

Total Downloads

5,867,895

Last Day

169

Last Week

169

Last Month

112,360

Last Year

1,693,586

GitHub Statistics

356 Stars

441 Commits

82 Forks

8 Watching

41 Branches

19 Contributors

Bundle Size

55.48 kB

Minified

17.08 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

4.11.4

Package Id

react-dropdown-select@4.11.4

Unpacked Size

181.19 kB

Size

47.79 kB

File Count

NPM Version

10.8.2

Node Version

18.20.5

Publised On

27 Nov 2024

Total Downloads

Cumulative downloads

Total Downloads

5,867,895

Last day

169

Compared to previous day

Last week

-99.2%

169

Compared to previous week

Last month

7.3%

112,360

Compared to previous month

Last year

20%

1,693,586

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-dropdown-select

Customisable dropdown select for react

Features

configurable via props
total custom components overrides for all internals via render prop callbacks (with access to internal props, state and methods)
stylable via css (or custom components)
portal support for rendering dropdown outside local DOM tree. e.g. in document.body
auto position
small bundle size

Installation

npm install --save react-dropdown-select

Web site

Web site, docs and demo

Motivation

react-select is very nice, but sometimes project requirements are beyond it's abilities

Usage

import:

import Select from "react-dropdown-select";

and use as:

1const options = [
2  {
3    value: 1,
4    label: 'Leanne Graham'
5  },
6  {
7    value: 2,
8    label: 'Ervin Howell'
9  }
10];
11
12<Select options={options} onChange={(values) => this.setValues(values)} />;

If your options don't have value and label fields, include labelField and valueField in the props:

1const options = [
2  {
3    id: 1,
4    name: 'Leanne Graham'
5  },
6  {
7    id: 2,
8    name: 'Ervin Howell'
9  }
10];
11
12<Select
13  options={options}
14  labelField="name"
15  valueField="id"
16  onChange={(values) => this.setValues(values)}
17/>;

options and onChange are the minimum required props

Help and Contributions

How to help/contribute

fix issues, pull request are very welcome
write, improve docs
write tests (we use jest)
suggest features and improvements

Demo

API

Component props

Prop	Type	Default	Description
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)
defaultMenuIsOpen	bool	false	If true, dropdown will be open by default
autoFocus	bool	false	If true, and `searchable`, dropdown will auto focus
clearOnBlur	bool	true	If true, and `searchable`, search value will be cleared on blur
clearOnSelect	bool	true	If true, and `searchable`, search value will be cleared upon value select/de-select
name	string	null	If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value
required	bool	false	If set, input type hidden would be added in the component with `required` prop as true/false
pattern	string	null	If set, input type hidden would be added in the component with `pattern` prop as regex
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"	Minimum height of a dropdown
direction	string	"ltr"	direction of a dropdown "ltr", "rtl" or "auto"
searchBy	string	label	Search by object property in values
sortBy	string	null	Sort 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
closeOnClickInput	bool	false	If true, clicking input will close the dropdown if you are not searching.
dropdownPosition	string	"bottom"	Available options are "auto", "top" and "bottom" defaults to "bottom". Auto will adjust itself according Select's position on the page
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
backspaceDelete	bool	true	If true, backspace key will delete last value
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
disabledLabel	string	"disabled"	Label shown on disabled field (after) the text
selectAll	bool	false	Allow to select all
selectAllLabel	string	"Select all"	Label for "Select all"
clearAllLabel	string	"Clear all"	Label for "Clear all"
additionalProps	object	null	Additional props to pass to Select

Callback props

by using renderer props to override components some of the functionality will have to be handled manually with a help of internal props, states and methods exposed

Prop	Type	Default	Description
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)
onDropdownCloseRequest	func	undefined	Fires upon dropdown closing state, stops the closing and provides own method `close()`
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
searchFn	func	undefined	Overrides internal search function
handleKeyDownFn	func	undefined	Overrides internal keyDown function

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

5

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/gatsby.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/gatsby.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/gatsby.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/gatsby.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/npm-publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/npm-publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/npm-publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/npm-publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull-request.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/on-pull-request.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull-request.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/sanusart/react-dropdown-select/on-pull-request.yml/master?enable=pin
Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

2

Maintained

Determines if the project is "actively maintained".

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

55 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m
Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-mhxj-85r3-2x55
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-7ch4-rr99-cqcw
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-rjqq-98f6-6j3r
Warn: Project is vulnerable to: GHSA-mjxr-4v3x-q3m4
Warn: Project is vulnerable to: GHSA-cgfm-xwp7-2cvr
Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3

Score

3.1

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-dropdown-select

react-dropdown-select

Installations

Developer Guide

Yes

CommonJS

18.20.5

10.8.2

Score

Pull Requests

8

141

29

104

Issues

17

180

163

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

55.48 kB

17.08 kB

Maintainers

Package Meta Information

Total Downloads

5,867,895

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-dropdown-select

Features

Installation

Web site

Motivation

Usage

Help and Contributions

How to help/contribute

Demo

API

Component props

Callback props

License

10

10

10

5

2

1

0

0

0

0

0

0

0

3.1

/10