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

rc-select

v14.16.4

Published

React Select

Downloads

6,336,992

Readme

rc-select


React Select Component.

NPM version npm download build status Codecov bundle size dumi

Screenshots

Feature

  • support IE11+,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 } from 'rc-select';
import 'rc-select/assets/index.css';

export default () => (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
);

API

Select props

| name | description | type | default | | --- | --- | --- | --- | | id | html id to set on the component wrapper | String | '' | | className | additional css class of root dom node | String | '' | | data-* | html data attributes to set on the component wrapper | 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 width is same with select | boolean | true | | dropdownClassName | additional className applied to dropdown | String | - | | dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} | | dropdownAlign | additional align applied to dropdown | AlignType | {} | | dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties | | notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' | | tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? | | | open | control select open | boolean | | | defaultOpen | control select default open | boolean | | | placeholder | select placeholder | React Node | | | showSearch | whether show search input in single mode | boolean | true | | allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | 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. | boolean | false | | tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - | | maxTagTextLength | max tag text length to show | number | - | | maxTagCount | max tag count to show | number | - | | maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - | | combobox | enable combobox mode(can not set multiple at the same time) | boolean | false | | multiple | whether multiple select | boolean | false | | disabled | whether disabled select | boolean | false | | filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | true/Function(inputValue:string, option:Option) | | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' | | filterSort | Sort function for search options sorting, see Array.sort's compareFunction. | Function(optionA:Option, optionB: Option) | - | | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' | | defaultValue | initial selected option(s) | String | String[] | - | | value | current selected option(s) | String | String[] | {key:String, label:React.Node} | {key:String, label:React.Node}[] | - | | labelInValue | whether to embed label in value, see above value type. Not support combobox mode | boolean | false | | backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false | | onChange | called when select an option or input value change(combobox) | function(value, option:Option | Option[]) | - | | onSearch | called when input changed | function | - | | onBlur | called when blur | function | - | | onFocus | called when focus | function | - | | onPopupScroll | called when menu is scrolled | 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, option:Option) | - | | onInputKeyDown | called when key down on input | Function(event) | - | | defaultActiveFirstOption | whether active first option by default | boolean | true | | getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} | | getInputElement | customize input element | function(): Element | - | | showAction | actions trigger the dropdown to show | String[]? | - | | autoFocus | focus select after mount | boolean | - | | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | | prefix | specify the select prefix icon or text | ReactNode | - | | suffixIcon | specify the select arrow icon | ReactNode | - | | clearIcon | specify the clear icon | ReactNode | - | | removeIcon | specify the remove icon | ReactNode | - | | menuItemSelectedIcon | specify the item selected icon | ReactNode | (props: MenuItemProps) => ReactNode | - | | dropdownRender | render custom dropdown menu | (menu: React.Node) => ReactNode | - | | loading | show loading icon in arrow | boolean | false | | virtual | Disable virtual scroll | boolean | true | | direction | direction of dropdown | 'ltr' | 'rtl' | 'ltr' | | optionRender | Custom rendering options | (oriOption: FlattenOptionData<BaseOptionType> , info: { index: number }) => React.ReactNode | - | | labelRender | Custom rendering label | (props: LabelInValueType) => React.ReactNode | - | | maxCount | The max number of items can be selected | number | - |

Methods

| name | description | parameters | return | | ----- | ------------------------- | ---------- | ------ | | focus | focus select programmably | - | - | | blur | blur select programmably | - | - |

Option props

| name | description | type | default | | --- | --- | --- | --- | | className | additional class to option | String | '' | | disabled | no effect for click or keydown for this item | boolean | false | | key | if react want you to set key, then key is same as value, you can omit value | String/number | - | | value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - | | title | if you are not satisfied with auto-generated title which is show while hovering on selected value, you can customize it with this property | 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 | - | | className | same as Option props | String | '' | | title | same as Option props | String | - |

Development

npm install
npm start

Example

local example: http://localhost:9001/

online example: http://select.react-component.now.sh/

Test Case

npm test

Coverage

npm run coverage

License

rc-select is released under the MIT license.