@rc-component/select
+
Part of the Ant Design ecosystem.
🎯 Composable Select component for React, with search, async-friendly option data, custom rendering, and virtual scrolling.
+ +
+ 
+ 
+ 
+ 
+ 
-
-## Feature
-
-- support IE11+,Chrome,Firefox,Safari
-
-### Keyboard
-
-- Open select (focus input || focus and click)
-- KeyDown/KeyUp/Enter to navigate menu
-
-## install
-
-[](https://npmjs.org/package/@rc-component/select)
+ Part of the Ant Design ecosystem.
🎯 Composable Select component for React, with search, async-friendly option data, custom rendering, and virtual scrolling.
+ +
+
+
+
+
+
English | 简体中文
+ + +## Highlights + +| Area | Support | +| --------- | ---------------------------------------------------------- | +| Data | `options` data, legacy `Option` children, grouped options | +| Modes | Single select, `multiple`, `tags`, and `combobox` | +| Search | Controlled search, custom filter, custom sort | +| Rendering | Custom option, label, selected item, clear, and menu icons | +| Scale | Virtual scrolling with configurable item height | + +## Install + +```bash +npm install @rc-component/select +``` ## Usage -### basic use - -```jsx | pure -import Select, { Option } from '@rc-component/select'; +```tsx | pure +import Select from '@rc-component/select'; import '@rc-component/select/assets/index.css'; export default () => ( - + ); ``` -## API +## Examples -### Select props +Run the local dumi site: - -| 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](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} | -| 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[] \| ((input: string) => 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 \| Object | 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 | -| 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[]) | - | -| 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 | - | -| 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\ Ant Design 生态的一部分。
🎯 React 选择器组件，支持单选、多选、搜索、标签和自定义渲染。
+ +
+
+
+
+
+
English | 简体中文
+ + +## 特性 + +| 范围 | 支持 | +| --------- | ---------------------------------------------------------- | +| 数据 | `options` 数据，旧版 `Option` 子项，分组选项 | +| Modes | 单选、`multiple`、`tags` 和 `combobox` 模式 | +| 搜索 | 受控搜索、自定义过滤和自定义排序 | +| Rendering | 自定义选项、标签、选中项、清除图标和菜单图标 | +| Scale | 支持可配置项高度的虚拟滚动 | + +## 安装 + +```bash +npm install @rc-component/select +``` + +## 使用 + +```tsx | pure +import Select from '@rc-component/select'; +import '@rc-component/select/assets/index.css'; + +export default () => ( + +); +``` + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +### Select + +Select 还接受来自 `BaseSelect` 的公共属性，但由 Select 重新定义的 `showSearch` 除外。 + +| 名称 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| autoClearSearchValue | 已弃用。请改用 `showSearch.autoClearSearchValue`。 | boolean | true | +| backfill | 将活动选项回填到输入中。仅适用于 `combobox` 模式。 | boolean | false | +| children们 | 旧版选项子节点。新代码推荐使用 `options`。 | ReactNode | - | +| classNames | 语义className。 | `Partial