@rc-component/select

@rc-component/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-component/select';
import '@rc-component/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 | Object	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
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[])	-
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	-
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	-	-

showSearch

name	description	type	default
autoClearSearchValue	auto clear search input value when multiple select is selected/deselected	boolean	true
filterOption	whether filter options by input value. default filter by option's optionFilterProp prop's value	boolean| (inputValue: string, option: Option) => boolean	true
filterSort	Sort function for search options sorting, see Array.sort's compareFunction.	Function(optionA:Option, optionB: Option)	-
optionFilterProp	which prop value of option will be used for filter if filterOption is true	String	'value'
searchValue	The current input "search" text	string	-
onSearch	called when input changed	function	-

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: https://select-react-component.vercel.app/

Test Case

npm test

Coverage

npm run coverage

License

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