Package Health Score

87 / 100

security
No known security issues
popularity
Influential project
maintenance
Healthy
community
Active

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
14.16.4	\|	12/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
14.15.2	\|	09/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
13.2.1	\|	12/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
12.1.13	\|	06/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
12.0.4	\|	12/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Influential project

Weekly Downloads (1,299,400)

GitHub Stars: 904
Forks: 458
Contributors: 120

Direct Usage Popularity

The npm package rc-select receives a total of 1,299,400 downloads a week. As such, we scored rc-select popularity level to be Influential project.

Based on project statistics from the GitHub repository for the npm package rc-select, we found that it has been starred 904 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Active

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 120
Funding: Yes

A good and healthy external contribution signal for rc-select project, which invites more than one hundred open source maintainers to collaborate on the repository.

We found a way for you to contribute to the project! Looks like rc-select is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 143
Open PR: 52
Last Release: 16 days ago
Last Commit: 16 days ago

Further analysis of the maintenance status of rc-select based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that rc-select demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=8.x

Age: 10 years
Dependencies: 7 Direct
Versions: 473
Install Size: 345 kB
Dist-tags: 2
# of Files: 137
Maintainers: 9
TS Typings: Yes

rc-select has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Not sure how to use rc-select?

To help you get started, we've collected the most common ways that rc-select is being used within popular public projects.

godaner / vm-engine / vm-backend / src / main / resources / static / node_modules / antd / lib / auto-complete / index.js View on Github

}
                }) : [];
            }
            return _react2['default'].createElement(
                _select2['default'],
                (0, _extends3['default'])({}, this.props, { className: cls, mode: 'combobox', optionLabelProp: optionLabelProp, getInputElement: this.getInputElement, notFoundContent: notFoundContent }),
                options
            );
        }
    }]);
    return AutoComplete;
}(_react2['default'].Component);

exports['default'] = AutoComplete;

AutoComplete.Option = _rcSelect.Option;
AutoComplete.OptGroup = _rcSelect.OptGroup;
AutoComplete.defaultProps = {
    prefixCls: 'ant-select',
    transitionName: 'slide-up',
    optionLabelProp: 'children',
    choiceTransitionName: 'zoom',
    showSearch: false,
    filterOption: false
};
module.exports = exports['default'];

View more ways to use rc-select

rc-select

React Select Component.

Screenshots

Feature

support IE11+,Chrome,Firefox,Safari

Keyboard

Open select (focus input || focus and click)
KeyDown/KeyUp/Enter to navigate menu

install

Usage

basic use

import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';

export default () =&gt; (
  <select>
    <option value="jack">jack</option>
    <option value="lucy">lucy</option>
    <option value="yiminghe">yiminghe</option>
  </select>
);

API

Select props

name	description	type	default
id	html id to set on the component wrapper	String	''
className	additional css class of root dom node	String	''
data-*	html data attributes to set on the component wrapper	String	''
prefixCls	prefix class	String	''
animation	dropdown animation name. only support slide-up now	String	''
transitionName	dropdown css animation name	String	''
choiceTransitionName	css animation name for selected items at multiple mode	String	''
dropdownMatchSelectWidth	whether dropdown's width is same with select	boolean	true
dropdownClassName	additional className applied to dropdown	String	-
dropdownStyle	additional style applied to dropdown	React.CSSProperties	{}
dropdownAlign	additional align applied to dropdown	AlignType	{}
dropdownMenuStyle	additional style applied to dropdown menu	Object	React.CSSProperties
notFoundContent	specify content to show when no result matches.	ReactNode	'Not Found'
tokenSeparators	separator used to tokenize on tag/multiple mode	string[]?
open	control select open	boolean
defaultOpen	control select default open	boolean
placeholder	select placeholder	React Node
showSearch	whether show search input in single mode	boolean	true
allowClear	whether allowClear	boolean	{ clearIcon?: ReactNode }
tags	when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.	boolean	false
tagRender	render custom tags.	(props: CustomTagProps) => ReactNode	-
maxTagTextLength	max tag text length to show	number	-
maxTagCount	max tag count to show	number	-
maxTagPlaceholder	placeholder for omitted values	ReactNode/function(omittedValues)	-
combobox	enable combobox mode(can not set multiple at the same time)	boolean	false
multiple	whether multiple select	boolean	false
disabled	whether disabled select	boolean	false
filterOption	whether filter options by input value. default filter by option's optionFilterProp prop's value	boolean	true/Function(inputValue:string, option:Option)
optionFilterProp	which prop value of option will be used for filter if filterOption is true	String	'value'
filterSort	Sort function for search options sorting, see Array.sort's compareFunction.	Function(optionA:Option, optionB: Option)	-
optionLabelProp	render option value or option children as content of select	String: 'value'/'children'	'value'
defaultValue	initial selected option(s)	String \| String[]	-
value	current selected option(s)	String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[]	-
labelInValue	whether to embed label in value, see above value type. Not support `combobox` mode	boolean	false
backfill	whether backfill select option to search input (Only works in single and combobox mode)	boolean	false
onChange	called when select an option or input value change(combobox)	function(value, option:Option \| Option[])	-
onSearch	called when input changed	function	-
onBlur	called when blur	function	-
onFocus	called when focus	function	-
onPopupScroll	called when menu is scrolled	function	-
onSelect	called when a option is selected. param is option's value and option instance	Function(value, option:Option)	-
onDeselect	called when a option is deselected. param is option's value. only called for multiple or tags	Function(value, option:Option)	-
onInputKeyDown	called when key down on input	Function(event)	-
defaultActiveFirstOption	whether active first option by default	boolean	true
getPopupContainer	container which popup select menu rendered into	function(trigger:Node):Node	function(){return document.body;}
getInputElement	customize input element	function(): Element	-
showAction	actions trigger the dropdown to show	String[]?	-
autoFocus	focus select after mount	boolean	-
autoClearSearchValue	auto clear search input value when multiple select is selected/deselected	boolean	true
prefix	specify the select prefix icon or text	ReactNode	-
suffixIcon	specify the select arrow icon	ReactNode	-
clearIcon	specify the clear icon	ReactNode	-
removeIcon	specify the remove icon	ReactNode	-
menuItemSelectedIcon	specify the item selected icon	ReactNode \| (props: MenuItemProps) => ReactNode	-
dropdownRender	render custom dropdown menu	(menu: React.Node) => ReactNode	-
loading	show loading icon in arrow	boolean	false
virtual	Disable virtual scroll	boolean	true
direction	direction of dropdown	'ltr' \| 'rtl'	'ltr'
optionRender	Custom rendering options	(oriOption: FlattenOptionData\ , info: { index: number }) => React.ReactNode	-
labelRender	Custom rendering label	(props: LabelInValueType) => React.ReactNode	-
maxCount	The max number of items can be selected	number	-

Methods

name	description	parameters	return
focus	focus select programmably	-	-
blur	blur select programmably	-	-

Option props

name	description	type	default
className	additional class to option	String	''
disabled	no effect for click or keydown for this item	boolean	false
key	if react want you to set key, then key is same as value, you can omit value	String/number	-
value	default filter by this attribute. if react want you to set key, then key is same as value, you can omit value	String/number	-
title	if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property	String	-

OptGroup props

name	description	type	default
label	group label	String/React.Element	-
key	-	String	-
value	default filter by this attribute. if react want you to set key, then key is same as value, you can omit value	String	-
className	same as `Option props`	String	''
title	same as `Option props`	String	-

Development

npm install
npm start

Example

local example: https://localhost:9001/

online example: https://select.react-component.now.sh/

Test Case

npm test

Coverage

npm run coverage

License

rc-select is released under the MIT license.

rc-select dependencies

@babel/runtime @rc-component/trigger classnames rc-motion rc-overflow rc-util rc-virtual-list

FAQs

What is rc-select?

React Select. Visit Snyk Advisor to see a full health score report for rc-select, including popularity, security, maintenance & community analysis.

Is rc-select popular?

The npm package rc-select receives a total of 1,299,400 weekly downloads. As such, rc-select popularity was classified as an influential project. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is rc-select well maintained?

We found that rc-select demonstrated a healthy version release cadence and project activity. It has a community of 120 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is rc-select safe to use?

The npm package rc-select was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 21 December-2024, at 01:18 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (1,299,400)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Not sure how to use rc-select?

rc-select

Screenshots

Feature

Keyboard

install

Usage

basic use

API

Select props

Methods

Option props

OptGroup props

Development

Example

Test Case

Coverage

License

rc-select dependencies

rc-select development dependencies

FAQs

What is rc-select?

Is rc-select popular?

Is rc-select well maintained?

Is rc-select safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues