React Mentions
npm install rc-mentions[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]
[npm-image]: http://img.shields.io/npm/v/rc-mentions.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-mentions
[travis-image]: https://img.shields.io/travis/react-component/mentions/master?style=flat-square
[travis-url]: https://travis-ci.com/react-component/mentions
[github-actions-image]: https://github.com/react-component/mentions/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/mentions/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/mentions/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/mentions
[david-url]: https://david-dm.org/react-component/mentions
[david-image]: https://david-dm.org/react-component/mentions/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/mentions?type=dev
[david-dev-image]: https://david-dm.org/react-component/mentions/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-mentions.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-mentions
[bundlephobia-url]: https://bundlephobia.com/package/rc-mentions
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-mentions
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

- support ie9,ie9+,chrome,firefox,safari
- Open mentions (focus input || focus and click)
- KeyDown/KeyUp/Enter to navigate menu

``js
/**
* inline: true
*/
import Mentions from 'rc-mentions';
// Import the default styles
import './index.less';
const { Option } = Mentions;
var Demo = (
);
React.render(
`
Note: We use index.less for styling, you can convert them into css and properly reference them to the code above.
| name | description | type | default |
| ----------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
| autoFocus | Auto get focus when component mounted | boolean | false |string
| defaultValue | Default value | | - |false \| (input: string, option: OptionProps) => boolean
| filterOption | Customize filter option logic | | - |ReactNode
| notFoundContent | Set mentions content when not match | | 'Not Found' |'top' \| 'bottom'
| placement | Set popup placement | | 'bottom' |'ltr' \| 'rtl'
| direction | Set popup direction | | 'ltr' |string \| string[]
| prefix | Set trigger prefix keyword | | '@' |number
| rows | Set row count | | 1 |string
| split | Set split string before and after selected mention | | ' ' |true
| silent | Used in transition phase, does not respond to keyboard enter events when equal to | boolean | false |(text: string, props: MentionsProps) => void
| validateSearch | Customize trigger search logic | | - |string
| value | Set value of mentions | | - |(text: string) => void
| onChange | Trigger when value changed | | - |React.KeyboardEventHandler
| onKeyDown | Trigger when user hits a key | | - |React.KeyboardEventHandler
| onKeyUp | Trigger when user releases a key | | - |(option: OptionProps, prefix: string) => void
| onSelect | Trigger when user select the option | | - |(text: string, prefix: string) => void
| onSearch | Trigger when prefix hit | | - |React.FocusEventHandler
| onFocus | Trigger when mentions get focus | | - |React.FocusEventHandler
| onBlur | Trigger when mentions lose focus | | - |() => HTMLElement
| getPopupContainer | DOM Container for suggestions | | - |true\|false
| autoSize | Textarea height autosize feature, can be set to or an object { minRows: 2, maxRows: 6 } | boolean \| object | - |function(e)
| onPressEnter | The callback function that is triggered when Enter key is pressed | | - |function({ width, height })
| onResize | The callback function that is triggered when textarea resize | | - |
| name | description |
| ------- | -------------------- |
| focus() | Component get focus |
| blur() | Component lose focus |
``
npm install
npm start
http://localhost:9001/
online example: http://react-component.github.io/mentions/
``
npm test
```
npm run coverage
rc-mentions is released under the MIT license.