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

---

select ui component for react

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="1">jack</Option>
    <Option value="2">lucy</Option>
    <Option value="3">jim</Option>
  </Select>
);
React.render(c, container);

API

Select props

name	type	default	description
className	String		additional css class of root dom node
value	String | Array		specify the default selected item(s)
multiple		false	can select more than one option
filterOption		true	whether filter options by input value
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.
allowClear		false
combobox		false	enable combobox mode(can not set multiple at the same time)
onSelect	Function		called when a option is selected. param is option's value
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)

Option props

name	type	default	description
className	String		additional css class of root dom node
disabled	Boolean	false	no effect for click or keydown for this item
value	String		search by this attribute

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.