rc-select
Advanced tools
Package description
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.
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>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, 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 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
React Select
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);
| 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. | |
| 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) |
| name | type | default | description |
|---|---|---|---|
| disabled | Boolean | false | no effect for click or keydown for this item |
| value | String | search by this attribute |
| name | type | default | description |
|---|---|---|---|
| label | String|React.Element | group label | |
| key | String |
npm install
npm start
http://localhost:8003/examples/
online example: http://react-component.github.io/select/examples/
http://localhost:8003/tests/runner.html?coverage
rc-select is released under the MIT license.
FAQs
Unknown package
The npm package rc-select receives a total of 1,064,758 weekly downloads. As such, rc-select popularity was classified as popular.
We found that rc-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.