# 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 ## Screenshots

## Feature - support ie9,ie9+,chrome,firefox,safari ### Keyboard - Open mentions (focus input || focus and click) - KeyDown/KeyUp/Enter to navigate menu ## install [![rc-mentions](https://nodei.co/npm/rc-mentions.png)](https://npmjs.org/package/rc-mentions) ## Usage ### basic use ```js /** * inline: true */ import Mentions from 'rc-mentions'; const { Option } = Mentions; var Demo = ( ); React.render(, 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.

	Stars	Issues	Version	Updated	Created
mentions-regex	105	2	2.0.3	9 years ago	9 years ago
rc-mentions			2.13.0	14 hours ago	5 years ago
react-mentions	2,353	227	4.4.10	a year ago	9 years ago
react-tag-input			6.9.0	3 months ago	9 years ago

mentions-regex vs rc-mentions vs react-mentions vs react-tag-input

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past