rc-select

What is rc-select?

The rc-select npm package is a React component that provides a customizable select box or dropdown list. It supports various functionalities such as searching, multiple selection, custom rendering, and more, making it a versatile choice for implementing select inputs in web applications.

What are rc-select's main functionalities?

Basic Select

This code sample demonstrates how to create a basic select dropdown with predefined options. Users can select one of the options from the dropdown.

import Select from 'rc-select';

<Select placeholder="Please select">
  <Select.Option value="option1">Option 1</Select.Option>
  <Select.Option value="option2">Option 2</Select.Option>
</Select>

Multiple Selection

This example shows how to enable multiple selections, allowing users to select more than one option from the dropdown.

import Select from 'rc-select';

<Select mode="multiple" placeholder="Please select">
  <Select.Option value="option1">Option 1</Select.Option>
  <Select.Option value="option2">Option 2</Select.Option>
</Select>

Searchable Select

This code snippet enables a search functionality within the select dropdown, making it easier for users to find and select options by typing.

import Select from 'rc-select';

<Select showSearch placeholder="Search to select">
  <Select.Option value="option1">Option 1</Select.Option>
  <Select.Option value="option2">Option 2</Select.Option>
</Select>

Custom Dropdown Render

This example demonstrates how to customize the rendering of the dropdown menu, allowing for additional elements like a custom footer to be added.

import Select from 'rc-select';

<Select dropdownRender={menu => (
  <div>
    {menu}
    <div style={{ padding: '8px', cursor: 'pointer' }}>Custom footer</div>
  </div>
)}>
  <Select.Option value="option1">Option 1</Select.Option>
  <Select.Option value="option2">Option 2</Select.Option>
</Select>

Other packages similar to rc-select

react-select

react-select is another popular React component for building select inputs. It offers similar functionalities to rc-select, such as searchable options, multi-select, and custom option rendering. However, react-select might be preferred for its extensive documentation and larger community support.

antd

antd, or Ant Design, is a comprehensive UI toolkit for React that includes a Select component with functionalities similar to rc-select. While rc-select is focused solely on the select component, antd offers a broader range of UI components, making it a good choice if you're looking for a complete design system.

material-ui

Material-UI is another UI framework for React that includes a Select component. It adheres to the Material Design guidelines and offers a different look and feel compared to rc-select. Material-UI's Select component provides similar functionalities but is ideal for those looking to implement Material Design in their projects.

README

rc-select

---

React Select

Screenshots

Feature

• support ie8,ie8+,chrome,firefox,safari

Keyboard

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

install

Usage

basic use

var React = require('react'); 
var Select = require('../');
var Option = Select.Option;

var c = (
  <Select>
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="jim">jim</Option>
  </Select>
);
React.render(c, container);

API

Select props

name	type	default	description
className	String		additional css class of root dom node
filterOption		true|Function(inputValue:string, option:Option)	whether filter options by input value. default filter by option's optionFilterProp prop's value
optionLabelProp	String	value	which prop value of option will render as content of select
optionFilterProp	String	value	which prop value of option will be used for filter if filterOption is true
showSearch	Boolean	true	whether show search input in single mode
onSearch	Function		called when input changed
disabled	Boolean	false	whether disabled select
animation	String		dropdown animation name. only support slide-up now
transitionName	String		dropdown css animation name
value	String | Array		specify the selected option(s)
defaultValue	String | Array		specify the default selected option(s)
multiple		false	can select more than one option
tags		false	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.
maxTagTextLength			max tag text length to show
allowClear		false
combobox		false	enable combobox mode(can not set multiple at the same time)
onSelect	Function(value:string, option:Option)		called when a option is selected. param is option's value and option instance
onDeselect	Function		called when a option is deselected. param is option's value. only called for multiple or tags
onChange	function(value)		called when select an option or input value change(combobox)
renderDropdownToBody	Boolean	false	whether render dropdown to body
dropdownMatchSelectWidth	Boolean	true	whether dropdown 's with is same with select
dropdownStyle	Object	{}	additional style applied to dropdown
dropdownMenuStyle	Object	{}	additional style applied to dropdown menu

Option props

name	type	default	description
disabled	Boolean	false	no effect for click or keydown for this item
key	String		if react want you to set key, then key is same as value, you can omit value.
value	String		default filter by this attribute. if react want you to set key, then key is same as value, you can omit value.

OptGroup props

name	type	default	description
label	String|React.Element		group label
key	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.