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-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 })`	-

Methods

name	description
focus()	Component get focus
blur()	Component lose focus

Development

npm install
npm start

Example

http://localhost:9001/

online example: http://react-component.github.io/mentions/

Test Case

npm test

Coverage

npm run coverage

rc-mentions

Screenshots

Feature

Keyboard

install

Usage

basic use

API

Mentions props

Methods

Development

Example

Test Case

Coverage

License

Current Tags

69 Versions