react-component / Select
Licence: mit
React Select
Stars: ✭ 609
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Select
React Joyride
Create guided tours in your apps
Stars: ✭ 4,215 (+592.12%)
Mutual labels: react-component
React Day Picker
Date picker component for React
Stars: ✭ 4,374 (+618.23%)
Mutual labels: react-component
React Compound Slider
◾️ React Compound Slider | A small React slider with no opinion on markup or styles
Stars: ✭ 553 (-9.2%)
Mutual labels: react-component
React Loader Spinner
Collection set of react-spinner for async operation
Stars: ✭ 378 (-37.93%)
Mutual labels: react-component
Chart Race React
📊 Seamless bar chart race component for React.
Stars: ✭ 406 (-33.33%)
Mutual labels: react-component
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (-27.26%)
Mutual labels: react-component
Surmon.me.native
📱 My blog app, powered by react-native
Stars: ✭ 579 (-4.93%)
Mutual labels: react-component
React Alice Carousel
React responsive component for building content galleries, content rotators and any React carousels
Stars: ✭ 419 (-31.2%)
Mutual labels: react-component
Uiw
⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
Stars: ✭ 531 (-12.81%)
Mutual labels: react-component
React Lines Ellipsis
Simple multiline ellipsis component for React.JS
Stars: ✭ 383 (-37.11%)
Mutual labels: react-component
Recipes App React Native
Recipes App in React Native
Stars: ✭ 386 (-36.62%)
Mutual labels: react-component
React Event Timeline
A responsive event timeline in React.js
Stars: ✭ 504 (-17.24%)
Mutual labels: react-component
React Avatar
👤 Load, crop & preview avatar with React
Stars: ✭ 361 (-40.72%)
Mutual labels: react-component
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (-5.42%)
Mutual labels: react-component
React Pro Sidebar
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
Stars: ✭ 359 (-41.05%)
Mutual labels: react-component
Sunflower
🦹 Process components for antd4 & antd3 by alipay industry technology
Stars: ✭ 441 (-27.59%)
Mutual labels: react-component
React Contexify
Add a context menu to your react app with ease
Stars: ✭ 575 (-5.58%)
Mutual labels: react-component
Input Moment
React datetime picker powered by momentjs
Stars: ✭ 507 (-16.75%)
Mutual labels: react-component
rc-select
React Select
Screenshots
Feature
- support IE11+,Chrome,Firefox,Safari
Keyboard
- Open select (focus input || focus and click)
- KeyDown/KeyUp/Enter to navigate menu
install
Usage
basic use
import Select, { Option } from 'rc-select';
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 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' |
| tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? | |
| open | control select open | bool | |
| defaultOpen | control select default open | bool | |
| placeholder | select placeholder | React Node | |
| showSearch | whether show search input in single mode | bool | true |
| showArrow | whether show arrow | bool | true (single mode), false (multiple mode) |
| 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 |
| 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) | 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' |
| 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/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. Not support combobox mode |
Bool | false |
| backfill | whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
| onChange | called when select an option or input value change(combobox) | function(value, option:Option/Array) | - |
| 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 | bool | 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 | Bool | - |
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
| inputIcon | specify the select arrow icon | ReactNode | - |
| clearIcon | specify the clear icon | ReactNode | - |
| removeIcon | specify the remove icon | ReactNode | - |
| menuItemSelectedIcon | specify the remove icon | ReactNode | (props: MenuItemProps) => ReactNode | - |
| dropdownRender | render custom dropdown menu | (menu: React.Node, props: MenuProps) => ReactNode | - |
| loading | show loading icon in arrow | Boolean | false |
| virtual | Disable virtual scroll | Boolean | true |
| direction | direction of dropdown | 'ltr' | 'rtl' | 'ltr' |
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 | bool | 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 | - |
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].