Mention component.
When you need to mention someone or something.
// works when >=5.1.0, recommended ✅const options = [{ value: 'sample', label: 'sample' }];return <Mentions options={options} />;// works when <5.1.0, deprecated when >=5.1.0 🙅🏻♀️return (<Mentions onChange={onChange}><Mentions.Option value="sample">Sample</Mentions.Option></Mentions>);
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | Auto get focus when component mounted | boolean | false | |
| autoSize | Textarea height autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } | boolean | object | false | |
| defaultValue | Default value | string | - | |
| filterOption | Customize filter option logic | false | (input: string, option: OptionProps) => boolean | - | |
| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - | |
| notFoundContent | Set mentions content when not match | ReactNode | Not Found | |
| placement | Set popup placement | top | bottom | bottom | |
| prefix | Set trigger prefix keyword | string | string[] | @ | |
| split | Set split string before and after selected mention | string | | |
| status | Set validation status | 'error' | 'warning' | 'success' | 'validating' | - | 4.19.0 |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | |
| value | Set value of mentions | string | - | |
| onBlur | Trigger when mentions lose focus | () => void | - | |
| onChange | Trigger when value changed | (text: string) => void | - | |
| onFocus | Trigger when mentions get focus | () => void | - | |
| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - | |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | |
| options | Option Configuration | Options | [] | 5.1.0 |
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
| Property | Description | Type | Default |
|---|---|---|---|
| label | Title of the option | React.ReactNode | - |
| key | The key value of the option | string | - |
| disabled | Optional | boolean | - |
| className | className | string | - |
| style | The style of the option | React.CSSProperties | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| activeBorderColor | Active border color | string | #4096ff |
| activeShadow | Box-shadow when active | string | 0 0 0 2px rgba(5, 145, 255, 0.1) |
| addonBg | Background color of addon | string | rgba(0, 0, 0, 0.02) |
| controlItemWidth | Height of menu item | number | 100 |
| dropdownHeight | Height of popup | number | 250 |
| errorActiveShadow | Box-shadow when active in error status | string | 0 0 0 2px rgba(255, 38, 5, 0.06) |
| hoverBorderColor | Hover border color | string | #4096ff |
| paddingBlock | Vertical padding of input | number | 4 |
| paddingBlockLG | Vertical padding of large input | number | 7 |
| paddingBlockSM | Vertical padding of small input | number | 0 |
| paddingInline | Horizontal padding of input | number | 11 |
| paddingInlineLG | Horizontal padding of large input | number | 11 |
| paddingInlineSM | Horizontal padding of small input | number | 7 |
| warningActiveShadow | Box-shadow when active in warning status | string | 0 0 0 2px rgba(255, 215, 5, 0.1) |
| zIndexPopup | z-index of popup | number | 1050 |
Basic usage.
Controlled mode, for example, to work with Form.
Configure disabled and readOnly.
Height autoSize.
async.
Customize Trigger Token by prefix props. Default to @, Array<string> also supported.
Change the suggestions placement.
Add status to Mentions with status, which could be error or warning。
