Mentions

Used to mention someone or something in an input.

When to use

When you need to mention someone or something.

Examples

Basic

Basic usage.

Variants

Variants of Mentions, there are four variants: outlined filled borderless and underlined.

With Form

Controlled mode, for example, to work with Form.

disabled or readOnly

Configure disabled and readOnly.

Customize Popup

Customize the dropdown menu rendering via popupRender.

autoSize

Height autoSize.

Custom semantic dom styling

You can customize the semantic dom style of Mentions by passing objects/functions through classNames and styles. For example, set the textarea to be resizable.

Size

Configure size via size property.

Asynchronous loading

async.

Customize Trigger Token

Customize Trigger Token by prefix props. Default to @, Array<string> also supported.

Placement

Change the suggestions placement.

With clear icon

Customize clear button.

Status

Add status to Mentions with status, which could be error or warning.

API

Mentions and Mentions.Option are exported from @ceebee/ui/client.

Mention

Property	Description	Type	Default	Version
`allowClear`	Whether to show a clear icon to remove mentions content	`boolean \| { clearIcon?: ReactNode, disabled?: boolean }`	`false`	5.13.0, disabled: 6.4.0
`autoSize`	Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 }	`boolean \| object`	`false`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`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`	—
`popupRender`	Customize the dropdown menu rendering	`(menu: React.ReactElement) => ReactNode`	`-`	6.6.0
`prefix`	Set trigger prefix keyword	`string \| string\[]`	`@`	—
`split`	Set split string before and after selected mention	`string`	`—`	—
`size`	The size of the input box	`large \| medium \| small`	`-`	—
`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`	`-`	—
`variant`	Variants of Input	`outlined \| borderless \| filled \| underlined`	`outlined`	5.13.0 \| underlined: 5.24.0
`onBlur`	Trigger when mentions lose focus	`() => void`	`-`	—
`onChange`	Trigger when value changed	`(text: string) => void`	`-`	—
`onClear`	Callback when click the clear button	`() => void`	`-`	5.20.0
`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`	`-`	—
`onPopupScroll`	Trigger when mentions scroll	`(e: Event) => void`	`-`	5.23.0
`options`	Option Configuration	`Options`	`\[]`	5.1.0
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—

Option

Property	Description	Type	Default	Version
`value`	Value inserted when selected	`string`	`-`	—
`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`	`-`	—