@rc-component/mentions NPM

rc-mentions

Screenshots

Feature

support ie9,ie9+,chrome,firefox,safari

Keyboard

Open mentions (focus input || focus and click)
KeyDown/KeyUp/Enter to navigate menu

install

Usage

basic use

/**
 * inline: true
 */
import Mentions from '@rc-component/mentions';
// Import the default styles
import './index.less';

const { Option } = Mentions;

var Demo = (
  <Mentions>
    <Option value="light">Light</Option>
    <Option value="bamboo">Bamboo</Option>
    <Option value="cat">Cat</Option>
  </Mentions>
);
React.render(<Demo />, container);

Note: We use index.less for styling, you can convert them into css and properly reference them to the code above.

API

Mentions props

name	description	type	default
autoFocus	Auto get focus when component mounted	`boolean`	`false`
defaultValue	Default value	`string`	-
filterOption	Customize filter option logic	`false \\| (input: string, option: OptionProps) => boolean`	-
notFoundContent	Set mentions content when not match	`ReactNode`	'Not Found'
placement	Set popup placement	`'top' \\| 'bottom'`	'bottom'
direction	Set popup direction	`'ltr' \\| 'rtl'`	'ltr'
prefix	Set trigger prefix keyword	`string \\| string[]`	'@'
rows	Set row count	`number`	1
split	Set split string before and after selected mention	`string`	' '
silent	Used in transition phase, does not respond to keyboard enter events when equal to `true`	`boolean`	`false`
validateSearch	Customize trigger search logic	`(text: string, props: MentionsProps) => void`	-
value	Set value of mentions	`string`	-
onChange	Trigger when value changed	`(text: string) => void`	-
onKeyDown	Trigger when user hits a key	`React.KeyboardEventHandler<HTMLTextAreaElement>`	-
onKeyUp	Trigger when user releases a key	`React.KeyboardEventHandler<HTMLTextAreaElement>`	-
onSelect	Trigger when user select the option	`(option: OptionProps, prefix: string) => void`	-
onSearch	Trigger when prefix hit	`(text: string, prefix: string) => void`	-
onFocus	Trigger when mentions get focus	`React.FocusEventHandler<HTMLTextAreaElement>`	-
onBlur	Trigger when mentions lose focus	`React.FocusEventHandler<HTMLTextAreaElement>`	-
getPopupContainer	DOM Container for suggestions	`() => HTMLElement`	-
autoSize	Textarea height autosize feature, can be set to `true\\|false` or an object `{ minRows: 2, maxRows: 6 }`	`boolean \\| object`	-
onPressEnter	The callback function that is triggered when Enter key is pressed	`function(e)`	-
onResize	The callback function that is triggered when textarea resize	`function({ width, height })`	-