# rc-mentions > React Mentions Latest version **2.20.0** (published 2025-04-11) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-mentions pnpm add rc-mentions yarn add rc-mentions bun add rc-mentions ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 2.20.0 | | Published | 2025-04-11 | | First published | 2019-05-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 76.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 112 | | Maintainers | afc163, zombiej, madccc | | Keywords | react, react-component, react-mentions, mentions | ## Links - npm: https://www.npmjs.com/package/rc-mentions - Repository: https://github.com/react-component/mentions - Homepage: http://github.com/react-component/mentions - Issues: http://github.com/react-component/mentions/issues - npm.io page: https://npm.io/package/rc-mentions ## Dependencies (7) - [rc-menu](https://npm.io/package/rc-menu.md) ~9.16.0 - [rc-util](https://npm.io/package/rc-util.md) ^5.34.1 - [rc-input](https://npm.io/package/rc-input.md) ~1.8.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [rc-textarea](https://npm.io/package/rc-textarea.md) ~1.10.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.22.5 - [@rc-component/trigger](https://npm.io/package/@rc-component/trigger.md) ^2.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.20.0 (latest) — 2025-04-11 - 0.2.0-alpha.5 (beta) — 2019-05-08 - 2.19.1 — 2024-12-31 - 2.19.0 — 2024-12-31 - 2.18.0 — 2024-12-02 - 2.17.0 — 2024-10-30 - 2.16.1 — 2024-08-28 - 2.16.0 — 2024-08-16 - 2.15.0 — 2024-07-17 - 2.14.0 — 2024-06-06 - 2.13.2 — 2024-06-05 - 2.13.1 — 2024-05-18 - 2.13.0 — 2024-05-17 - 2.12.0 — 2024-05-17 - 2.11.1 — 2024-03-08 - … 59 more at https://npm.io/package/rc-mentions/versions ## README # 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'; // Import the default styles import './index.less'; const { Option } = Mentions; var Demo = ( ); React.render(, container); ``` **Note:** We use [index.less](https://github.com/react-component/mentions/blob/master/assets/index.less) for styling, you can convert them into css and properly reference them to the code above. ## 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` | ' ' | | silent | Used in transition phase, does not respond to keyboard enter events when equal to `true` | `boolean` | `false` | | 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. --- _Source: https://npm.io/package/rc-mentions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._