rc-mentions

---

React 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

import Mentions from 'rc-mentions';

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);

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	' '
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	-
onKeyUp	Trigger when user releases a key	React.KeyboardEventHandler	-
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	-
onBlur	Trigger when mentions lose focus	React.FocusEventHandler	-
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

License

rc-mentions is released under the MIT license.