# @rc-component/mentions

> React Mentions

Latest version **1.13.0** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rc-component/mentions
pnpm add @rc-component/mentions
yarn add @rc-component/mentions
bun add @rc-component/mentions
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.13.0 |
| Published | 2026-09-01 |
| First published | 2025-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 89.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 112 |
| Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 |
| Keywords | react, react-component, react-mentions, mentions |

## Links

- npm: https://www.npmjs.com/package/@rc-component/mentions
- Repository: https://github.com/react-component/mentions
- Homepage: https://react-component.github.io/mentions
- Issues: https://github.com/react-component/mentions/issues
- npm.io page: https://npm.io/package/@rc-component/mentions

## Dependencies (5)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [@rc-component/menu](https://npm.io/package/@rc-component/menu.md) ~1.6.0
- [@rc-component/util](https://npm.io/package/@rc-component/util.md) ^1.11.1
- [@rc-component/input](https://npm.io/package/@rc-component/input.md) ~1.3.1
- [@rc-component/trigger](https://npm.io/package/@rc-component/trigger.md) ^3.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

- 1.13.0 (latest) — 2026-09-01
- 1.12.0 — 2026-08-19
- 1.11.0 — 2026-07-01
- 1.10.0 — 2026-06-01
- 1.9.0 — 2026-05-06
- 1.8.1 — 2026-03-21
- 1.8.0 — 2026-03-20
- 1.7.2 — 2026-03-12
- 1.7.1 — 2026-03-11
- 1.7.0 — 2026-03-10
- 1.6.0 — 2025-12-04
- 1.5.5 — 2025-11-07
- 1.5.4 — 2025-11-07
- 1.5.3 — 2025-11-07
- 1.5.2 — 2025-11-06
- … 15 more at https://npm.io/package/@rc-component/mentions/versions

## README

<div align="center">
  <h1>@rc-component/mentions</h1>
  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
  <p>💬 React mentions textarea with searchable suggestions and keyboard navigation.</p>

  <p>
    <a href="https://npmjs.org/package/@rc-component/mentions"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/mentions.svg?style=flat-square"></a>
    <a href="https://npmjs.org/package/@rc-component/mentions"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/mentions.svg?style=flat-square"></a>
    <a href="https://github.com/react-component/mentions/actions/workflows/react-component-ci.yml"><img alt="build status" src="https://github.com/react-component/mentions/actions/workflows/react-component-ci.yml/badge.svg"></a>
    <a href="https://app.codecov.io/gh/react-component/mentions"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/mentions/master.svg?style=flat-square"></a>
    <a href="https://bundlephobia.com/package/@rc-component/mentions"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/mentions?style=flat-square"></a>
    <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
  </p>
</div>

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

## Highlights

- Textarea mentions with prefix based search and selection.
- Keyboard navigation for suggestion menus.
- Data-driven `options` API and `Option` children API.
- Multiple prefixes, custom filtering, custom validation, and split token support.
- Built on `@rc-component/input`, `@rc-component/menu`, and `@rc-component/trigger`.

## Install

```bash
npm install @rc-component/mentions
```

> The package is published as `@rc-component/mentions`. Legacy `rc-mentions` references should migrate to the scoped package name.

## Usage

```tsx | pure
import Mentions from '@rc-component/mentions';

const options = [
  { value: 'light', label: 'Light' },
  { value: 'bamboo', label: 'Bamboo' },
  { value: 'cat', label: 'Cat' },
];

export default () => (
  <Mentions options={options} placeholder="Use @ to mention someone" />
);
```

```tsx | pure
import Mentions from '@rc-component/mentions';

const { Option } = Mentions;

export default () => (
  <Mentions prefix={['@', '#']}>
    <Option value="design">Design</Option>
    <Option value="docs">Docs</Option>
  </Mentions>
);
```

Import the styles from `assets/index.less` or the compiled CSS generated by `npm run compile`.

## Examples

Run the local dumi site:

```bash
npm install
npm start
```

Then open `http://localhost:8000`.

## API

### Mentions

| Property          | Type                                                       | Default       | Description                                     |
| ----------------- | ---------------------------------------------------------- | ------------- | ----------------------------------------------- |
| allowClear        | `boolean \| { clearIcon?: ReactNode }`                     | `false`       | Show a clear button for the textarea value.     |
| autoFocus         | `boolean`                                                  | `false`       | Focus the textarea when mounted.                |
| autoSize          | `boolean \| { minRows?: number; maxRows?: number }`        | -             | Auto resize textarea height.                    |
| children          | `ReactNode`                                                | -             | `Mentions.Option` children.                     |
| className         | `string`                                                   | -             | Class name for the root element.                |
| classNames        | `MentionsProps['classNames']`                              | -             | Semantic class names for slots.                 |
| defaultValue      | `string`                                                   | -             | Initial value.                                  |
| direction         | `'ltr' \| 'rtl'`                                           | `ltr`         | Popup direction.                                |
| filterOption      | `false \| (input: string, option: OptionProps) => boolean` | -             | Customize option filtering.                     |
| getPopupContainer | `() => HTMLElement`                                        | -             | Container for the suggestion popup.             |
| id                | `string`                                                   | -             | Textarea id.                                    |
| notFoundContent   | `ReactNode`                                                | `Not Found`   | Content shown when no option matches.           |
| options           | `DataDrivenOptionProps[]`                                  | -             | Data-driven options.                            |
| placement         | `'top' \| 'bottom'`                                        | `bottom`      | Suggestion popup placement.                     |
| popupClassName    | `string`                                                   | -             | Class name for the popup.                       |
| prefix            | `string \| string[]`                                       | `@`           | Trigger prefix or prefixes.                     |
| prefixCls         | `string`                                                   | `rc-mentions` | Class name prefix.                              |
| rows              | `number`                                                   | `1`           | Textarea row count.                             |
| silent            | `boolean`                                                  | `false`       | Ignore Enter behavior during transition phases. |
| split             | `string`                                                   | `' '`         | String inserted after a selected mention.       |
| style             | `React.CSSProperties`                                      | -             | Inline styles for the root element.             |
| styles            | `MentionsProps['styles']`                                  | -             | Semantic styles for slots.                      |
| transitionName    | `string`                                                   | -             | Popup transition name.                          |
| validateSearch    | `(text: string, split: MentionsProps['split']) => boolean` | -             | Customize trigger search logic.                 |
| value             | `string`                                                   | -             | Controlled value.                               |
| onBlur            | `React.FocusEventHandler<HTMLTextAreaElement>`             | -             | Triggered when textarea loses focus.            |
| onChange          | `(text: string) => void`                                   | -             | Triggered when value changes.                   |
| onFocus           | `React.FocusEventHandler<HTMLTextAreaElement>`             | -             | Triggered when textarea receives focus.         |
| onKeyDown         | `React.KeyboardEventHandler<HTMLTextAreaElement>`          | -             | Triggered on key down.                          |
| onKeyUp           | `React.KeyboardEventHandler<HTMLTextAreaElement>`          | -             | Triggered on key up.                            |
| onPopupScroll     | `(event: React.UIEvent<HTMLDivElement>) => void`           | -             | Triggered when the popup scrolls.               |
| onPressEnter      | `React.KeyboardEventHandler<HTMLTextAreaElement>`          | -             | Triggered when Enter is pressed.                |
| onResize          | `(size: { width: number; height: number }) => void`        | -             | Triggered when textarea size changes.           |
| onSearch          | `(text: string, prefix: string) => void`                   | -             | Triggered when a prefix starts a search.        |
| onSelect          | `(option: OptionProps, prefix: string) => void`            | -             | Triggered when an option is selected.           |
| popupRender       | `(menu: React.ReactElement) => ReactNode`                  | -             | Customize the dropdown menu rendering           |

### Option

| Property  | Type                  | Default | Description                               |
| --------- | --------------------- | ------- | ----------------------------------------- |
| children  | `ReactNode`           | -       | Option label.                             |
| className | `string`              | -       | Class name for the option.                |
| disabled  | `boolean`             | `false` | Disable the option.                       |
| key       | `string`              | -       | React key and option key.                 |
| style     | `React.CSSProperties` | -       | Inline option style.                      |
| value     | `string`              | -       | Mention value inserted into the textarea. |

### Ref

```tsx | pure
import Mentions, { type MentionsRef } from '@rc-component/mentions';

const ref = React.useRef<MentionsRef>(null);

ref.current?.focus();
ref.current?.blur();
```

| Property      | Type                          | Description                    |
| ------------- | ----------------------------- | ------------------------------ |
| focus         | `() => void`                  | Focus the textarea.            |
| blur          | `() => void`                  | Blur the textarea.             |
| textarea      | `HTMLTextAreaElement \| null` | Deprecated textarea reference. |
| nativeElement | `HTMLElement`                 | Root native element.           |

## Development

```bash
npm install
npm start
npm test
npm run tsc
npm run compile
npm run build
```

The dumi site runs at `http://localhost:8000` by default.

## Release

```bash
npm run prepublishOnly
```

The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.

## License

@rc-component/mentions is released under the [MIT](./LICENSE) license.

---
_Source: https://npm.io/package/@rc-component/mentions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._