npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

rc-select

v10.0.0-alpha.31

Published

React Select

Downloads

1,054,178

Readme

rc-select


React Select

NPM version build status Test coverage Dependencies DevDependencies npm download Storybook

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 arrowbooltrue (single mode), false (multiple mode)
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 type. Not support combobox modeBoolfalse
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/number-
valuedefault filter by this attribute. if react want you to set key, then key is same as value, you can omit valueString/number-
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:9001/

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

Test Case

npm test

Coverage

npm run coverage

License

rc-select is released under the MIT license.