README
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
import Select, {Option, OptGroup} from 'rc-select';
var c = (
<Select>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
);
React.render(c, container);
API
Select props
name | description | type | default |
---|---|---|---|
className | additional css class of root dom node | 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 with is same with select | bool | true |
dropdownClassName | additional className applied to dropdown | String | - |
dropdownStyle | additional style applied to dropdown | Object | {} |
dropdownAlign | additional align applied to dropdown | Object | {} |
dropdownMenuStyle | additional style applied to dropdown menu | Object | {} |
notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
placeholder | select placeholder | React Node | |
showSearch | whether show search input in single mode | bool | true |
searchPlaceholder | search input placeholder | React Node | |
allowClear | whether allowClear | bool | false |
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. | bool | false |
maxTagTextLength | max tag text length to show | number | - |
combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
multiple | whether multiple select | bool | false |
disabled | whether disabled select | bool | false |
filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
optionLabelProp | which prop value of option will render as content of select | String | 'value' |
defaultValue | initial selected option(s) | String/Array |
- |
value | current selected option(s) | String/Array |
- |
labelInValue | whether to embed label in value, see above value type | Bool | false |
onChange | called when select an option or input value change(combobox) | function(value) | - |
onSearch | called when input changed | 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) | - |
defaultActiveFirstOption | whether active first option by default | bool | true |
getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
Option props
name | description | type | default |
---|---|---|---|
className | additional class to option | String | '' |
disabled | no effect for click or keydown for this item | bool | false |
key | if react want you to set key, then key is same as value, you can omit value | 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 | - |
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 | - |
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.