rc-mentions

[![NPM version][npm-image]][npm-url]
[![Test coverage][codecov-image]][codecov-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-mentions.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-mentions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/mentions.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/mentions/branch/master
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-mentions.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-mentions

Screenshots

Feature

- support ie9,ie9+,chrome,firefox,safari

$3

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

install


Usage

$3

``js
/**
* inline: true
*/
import Mentions from 'rc-mentions';

const { Option } = Mentions;

var Demo = (

Light
Bamboo
Cat

);
React.render(, container);
`

API

$3

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

$3

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