Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Mention
Designer doc
Mention is an input component support both text and highlighted input with @ prefix.
Example
Basic Usage
View code
Serializing data
The value of Mention is using EditorState and it’s not serializable - meaning it cannot be stored directly to the backend. Instead, you should use convertFromRaw to restore from and convertToRaw to store it as a plain object to the backend.
View code
Customizing list
You can render anything inside the <MentionList>. Optionally, you can pass any data prop, which later can be used to render the mention button accordingly, like adding a Tooltip.
View code
Addons
There is built-ins addons MentionCharCount component. By default, it will count a single mention as one character. You can also customize the calculation by providing getCharCount prop.
View code
Resizing and placeholder
You can specify minRows and maxRows, by default to 6. To achieve resizing, specify resize to vertical. The placeholder will also adjust according to the height.
View code
Trigger and other configs
By default it uses @ as the trigger. You can specify mentionPrefix and mentionTrigger props to customize it. Please refer to @draft-js-plugins/mention Configuration Parameters for supported options.
View code
Caveats
MentionList iterates the children and collects the id, name, and data prop from each element. So in the following code, Tame Impala is abstracted away from App and won’t work correctly:
View code
As a display
For displaying, you can use MentionDisplay and MentionList without the MentionOption.
View code
API
Mention
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| bottomElement | ReactNode | ||
| bottomElementProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | ||
| disabled | boolean | ||
| editorProps | PluginEditorProps & { ref?: Ref<PluginEditor>; } | ||
| initialValue | EditorState | EditorState.createEmpty() | |
| invalid | boolean | ||
| maxRows | number | ||
| minRows | number | ||
| onChange | (value: EditorState) => void | ||
| placeholder | ReactNode | ||
| placeholderProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | ||
| resize | Resize | none | |
| toolbarElement | ReactNode | ||
| value | EditorState |
MentionButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> |
MentionCharCount
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| countProps | HTMLAttributes<HTMLDivElement> | ||
| getCharCount | (value: EditorState) => number | (editorState: EditorState) => { const mentionExtraCount = sum( convertToRaw(editorState.getCurrentContent()).blocks.map((b) => sum(b.entityRanges.map((er) => er.length - 1))) ); return getTextCharCount(editorState) - mentionExtraCount; } | |
| outOf | number | ||
| outOfProps | HTMLAttributes<HTMLDivElement> |
MentionDisplay
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| editorProps | PluginEditorProps & { ref?: Ref<PluginEditor>; } | ||
| value | EditorState |
MentionList
| Prop name | Type | Default | Description |
|---|---|---|---|
| config | MentionPluginConfig | ||
| id | string | ||
| initialIsOpen | boolean | ||
| initialKeyboardHighlightedIndex | number | ||
| initialMouseHighlightedIndex | number | ||
| initialSearchValue | string | ||
| initialSelectedIndex | number | ||
| initialValue | SelectValue | ||
| isOpen | boolean | ||
| keyboardHighlightedIndex | number | ||
| listProps | SelectScrollerProps | ||
| mouseHighlightedIndex | number | ||
| onChange | ChangeCallback | Called when selected value is changed. Different from onSelect, onChange is not called when the value is already selected. | |
| onIsOpenChange | (isOpen: boolean) => void | ||
| onKeyboardHighlightedIndexChange | (index: number) => void | ||
| onMouseHighlightedIndexChange | (index: number) => void | ||
| onSearch | SearchCallback | ||
| onSelect | ChangeCallback | Different from onChange: onSelect is triggered even if the option's value is the selected one. | |
| onSelectedIndexChange | (index: number) => void | ||
| renderButton | (props: MentionButtonProps) => ReactElement<any, string | JSXElementConstructor<any>> | (props: MentionButtonProps) => <MentionButton {...props} /> | |
| searchValue | string | This is not the selected value. Rather, it's a search value on input if you use SelectSearch. | |
| selectedIndex | number | ||
| stateReducer | AcdcStateReducer | ||
| value | SelectValue |
MentionOption
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| data | any | ||
| disabled | boolean | ||
| index | number | ||
| leftElement | ReactNode | ||
| name | string | ||
| value | SelectValue |
MentionPopover