Mentions

When To Use

When you need to mention someone or something.

Examples

<!-- prettier-ignore -->

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/size.tsx" version="6.0.0">Size</code> <code src="./demo/variant.tsx">Variants</code> <code src="./demo/async.tsx">Asynchronous loading</code> <code src="./demo/form.tsx">With Form</code> <code src="./demo/prefix.tsx">Customize Trigger Token</code> <code src="./demo/readonly.tsx">disabled or readOnly</code> <code src="./demo/placement.tsx">Placement</code> <code src="./demo/allowClear.tsx">With clear icon</code> <code src="./demo/autoSize.tsx">autoSize</code> <code src="./demo/autosize-textarea-debug.tsx" debug>debug autoSize</code> <code src="./demo/status.tsx">Status</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/component-token.tsx" debug>Component Token</code>

API

Common props ref：Common props

Mention

Property	Description	Type	Default	Version
allowClear	If allow to remove mentions content with clear icon	boolean | { clearIcon?: ReactNode }	false	5.13.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
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>	-

Mention methods

Name	Description
blur()	Remove focus
focus()	Get focus

Option

<!-- prettier-ignore -->

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	-

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Mentions"></ComponentTokenTable>