@core-rc/rc-select

中文文档

0.1.4发布于 2025/08/14MITTypeScriptESM + CJS近 30 天下载 4190

React Select

文档目录15 节

Feature
Keyboard
install
Usage
basic use
API
Select props
Methods
Option props
OptGroup props
Development
Example
Test Case
Coverage
License

@core-rc/rc-select

React Select Component.

Feature

support IE11+,Chrome,Firefox,Safari

Keyboard

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

install

yarn add @core-rc/rc-select

npm install @core-rc/rc-select

Usage

basic use

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

export default () => (
  <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<BaseOptionType> , 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: http://localhost:9001/

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

Test Case

npm test

Coverage

npm run coverage

License

@core-rc/rc-select is released under the MIT license.

版本与发布记录

@core-rc/rc-select 共发布 13 个版本，首次发布于 2024/12/04；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`0.1.4`latest	2025/08/14	1.2 年前
`0.1.3`	2025/06/25	1.4 年前
`0.1.2`	2025/03/22	1.6 年前
`0.1.1`	2025/03/21	1.6 年前
`0.1.1-0`next	2025/03/21	1.6 年前
`0.1.0`	2025/03/21	1.6 年前

关于 @core-rc/rc-select 的常见问题

@core-rc/rc-select 是什么？

React Select

如何安装 @core-rc/rc-select？

在项目目录运行 npm install @core-rc/rc-select，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（>=16.9.0）、react-dom（>=16.9.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@core-rc/rc-select 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@core-rc/rc-select 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@core-rc/rc-select 需要什么版本的 Node.js？

package.json 的 engines 字段要求 Node.js >=8.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

@core-rc/rc-select 可以商用吗？

@core-rc/rc-select 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@core-rc/rc-select 的下载量有多少？

根据 npm 官方下载统计，@core-rc/rc-select 在 2026/10/11 – 2026/11/09 这 30 天内被下载 4,190 次，日均约 140 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@core-rc/rc-select 还在维护吗？

最新版本 0.1.4 发布于 2025/08/14（1.2 年前）；至今共发布 13 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/12/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @core-rc/rc-select

pnpmpnpm add @core-rc/rc-select
yarnyarn add @core-rc/rc-select
bunbun add @core-rc/rc-select

peer 依赖react >=16.9.0react-dom >=16.9.0

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

4,190

约 4190 次日均 140 次

统计周期 2026/10/11 – 2026/11/09
数据来自 npm 官方下载统计，今天更新

最新版本0.1.4发布于 1.2 年前

开源许可MIT宽松许可

包体积287 kB155 个文件 · 解压后

运行依赖12 个另有 2 个 peer 依赖

模块格式ESM + CJS

TypeScript自带类型

Node.js>=8.x

发布版本13 个近 12 个月 0 个

首次发布2024/12/041.9 年前

元数据更新2025/08/14

每一个软件包背后，
都有分享与创造的人。