8.6.4 • Published 5 years ago

nhducit-rc-select v8.6.4

Weekly downloads
4
License
MIT
Repository
github
Last release
5 years ago

rc-select


React Select

NPM version build status Test coverage gemnasium deps npm download

Screenshots

Feature

  • support ie9,ie9+,chrome,firefox,safari

Keyboard

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

install

rc-select

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

namedescriptiontypedefault
idhtml id to set on the component wrapperString''
classNameadditional css class of root dom nodeString''
data-*html data attributes to set on the component wrapperString''
prefixClsprefix classString''
animationdropdown animation name. only support slide-up nowString''
transitionNamedropdown css animation nameString''
choiceTransitionNamecss animation name for selected items at multiple modeString''
dropdownMatchSelectWidthwhether dropdown's with is same with selectbooltrue
dropdownClassNameadditional className applied to dropdownString-
dropdownStyleadditional style applied to dropdownObject{}
dropdownAlignadditional align applied to dropdownObject{}
dropdownMenuStyleadditional style applied to dropdown menuObject{}
notFoundContentspecify content to show when no result matches.String'Not Found'
tokenSeparatorsseparator used to tokenize on tag/multiple modestring[]?
opencontrol select openbool
defaultOpencontrol select default openbool
placeholderselect placeholderReact Node
showSearchwhether show search input in single modebooltrue
showArrowwhether show arrow in single modebooltrue
allowClearwhether allowClearboolfalse
tagswhen 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.boolfalse
maxTagTextLengthmax tag text length to shownumber-
maxTagCountmax tag count to shownumber-
maxTagPlaceholderplaceholder for omitted valuesReactNode/function(omittedValues)-
comboboxenable combobox mode(can not set multiple at the same time)boolfalse
multiplewhether multiple selectboolfalse
disabledwhether disabled selectboolfalse
filterOptionwhether filter options by input value. default filter by option's optionFilterProp prop's valuebooltrue/Function(inputValue:string, option:Option)
optionFilterPropwhich prop value of option will be used for filter if filterOption is trueString'value'
optionLabelProprender option value or option children as content of selectString: 'value'/'children''value'
defaultValueinitial selected option(s)String/Array-
valuecurrent selected option(s)String/Array/{key:String, label:React.Node}/Array<{key, label}>-
firstActiveValuefirst active value when there is no valueString/Array-
labelInValuewhether to embed label in value, see above value typeBoolfalse
backfillwhether backfill select option to search input (Only works in single and combobox mode)Boolfalse
onChangecalled when select an option or input value change(combobox)function(value, option:Option/Array)-
onSearchcalled when input changedfunction-
onBlurcalled when blurfunction-
onFocuscalled when focusfunction-
onPopupScrollcalled when menu is scrolledfunction-
onSelectcalled when a option is selected. param is option's value and option instanceFunction(value, option:Option)-
onDeselectcalled when a option is deselected. param is option's value. only called for multiple or tagsFunction(value, option:Option)-
onInputKeyDowncalled when key down on inputFunction(event)-
defaultActiveFirstOptionwhether active first option by defaultbooltrue
getPopupContainercontainer which popup select menu rendered intofunction(trigger:Node):Nodefunction(){return document.body;}
getInputElementcustomize input elementfunction(): Element-
showActionactions trigger the dropdown to showString[]?-
autoFocusfocus select after mountBool-
autoClearSearchValueauto clear search input value when multiple select is selected/deselectedbooleantrue
inputIconspecify the select arrow iconReactNode-
clearIconspecify the clear iconReactNode-
removeIconspecify the remove iconReactNode-
menuItemSelectedIconspecify the remove iconReactNode | (props: MenuItemProps) => ReactNode-
dropdownRenderrender custom dropdown menu(menu: React.Node, props: MenuProps) => ReactNode-
loadingshow loading icon in arrowBooleanfalse

Methods

namedescriptionparametersreturn
focusfocus select programmably--
blurblur select programmably--

Option props

namedescriptiontypedefault
classNameadditional class to optionString''
disabledno effect for click or keydown for this itemboolfalse
keyif react want you to set key, then key is same as value, you can omit valueString-
valuedefault filter by this attribute. if react want you to set key, then key is same as value, you can omit valueString-
titleif you are not satisfied with auto-generated title which is show while hovering on selected value, you can customize it with this propertyString-

OptGroup props

namedescriptiontypedefault
labelgroup labelString/React.Element-
key-String-
valuedefault filter by this attribute. if react want you to set key, then key is same as value, you can omit valueString-

Development

npm install
npm start

Example

http://localhost:8003/examples/

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

Test Case

npm test

Coverage

npm run coverage

License

rc-select is released under the MIT license.