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 🙏

© 2024 – Pkg Stats / Ryan Hefner

sub-rc-select

v1.0.17

Published

React Select

Downloads

2

Readme

rc-select


React Select

NPM version build status Test coverage gemnasium deps npm download

Screenshots

Feature

  • support ie8,ie8+,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

| 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 | |showArrow | whether show arrow in single mode | bool | true | |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/{key:String, label:React.Node}/Array<{key, label}> | - | |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;} | |noLabelDel | label without del button | | | |tagsNoWrap | selection tags no wrap | | |

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.