rc-select

---

React Select

Screenshots

Feature

• support ie8,ie8+,chrome,firefox,safari

Keyboard

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

install

Usage

basic use

var React = require('react'); 
var Select = require('../');
var Option = Select.Option;

var c = (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="jim">jim</Option>
  </Select>
);
React.render(c, container);

API

Select props

name	type	default	description
className	String		additional css class of root dom node
filterOption		true|Function(inputValue:string, option:Option)	whether filter options by input value. default filter by option's optionFilterProp prop's value
optionLabelProp	String	value	which prop value of option will render as content of select
optionFilterProp	String	value	which prop value of option will be used for filter if filterOption is true
showSearch	Boolean	true	whether show search input in single mode
onSearch	Function		called when input changed
disabled	Boolean	false	whether disabled select
animation	String		dropdown animation name. only support slide-up now
transitionName	String		dropdown css animation name
defaultValue	String | Array<String>		initial selected option(s)
value	String | Array<String>		current selected option(s)
defaultValue	String | Array<String>		specify the default selected option(s)
multiple		false	can select more than one option
tags		false	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.
maxTagTextLength			max tag text length to show
allowClear		false
combobox		false	enable combobox mode(can not set multiple at the same time)
onSelect	Function(value:string, option:Option)		called when a option is selected. param is option's value and option instance
onDeselect	Function		called when a option is deselected. param is option's value. only called for multiple or tags
onChange	function(value, label)		called when select an option or input value change(combobox).
dropdownMatchSelectWidth	Boolean	true	whether dropdown 's with is same with select
dropdownClassName	String		additional className applied to dropdown
dropdownStyle	Object	{}	additional style applied to dropdown
dropdownMenuStyle	Object	{}	additional style applied to dropdown menu
notFoundContent	String		specify content to show when no result matches. defaults to Not Found

Option props

name	type	default	description
disabled	Boolean	false	no effect for click or keydown for this item
key	String		if react want you to set key, then key is same as value, you can omit value.
value	String		default filter by this attribute. if react want you to set key, then key is same as value, you can omit value.

OptGroup props

name	type	default	description
label	String|React.Element		group label
key	String

Development

npm install
npm start

Example

http://localhost:8003/examples/

online example: http://react-component.github.io/select/examples/

Test Case

http://localhost:8003/tests/runner.html?coverage

Coverage

http://localhost:8003/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8003/tests/runner.html?coverage

License

rc-select is released under the MIT license.