Package Exports

rc-mentions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-mentions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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	-
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.