rc-mentions

library2.20.0jsnpmunverified

rc-mentions is a foundational React component designed for building rich `@`-mentions input functionalities within web applications. It provides the core logic and UI structure for user mentions, offering a highly customizable experience without dictating specific styling. The current stable version, `2.20.0`, is actively maintained, with frequent minor and patch releases indicated by the project's recent activity, though specific release notes for major version `2` are not immediately visible in the provided data. Key differentiators include its broad browser compatibility (supporting IE9+, Chrome, Firefox, Safari), robust keyboard navigation for accessibility, and a flexible API that allows developers full control over filtering options and popup placement. Unlike opinionated UI libraries, `rc-mentions` ships unstyled, requiring developers to provide their own CSS (typically from its Less source) for integration into their design system.

web-framework crm-productivity

npm install rc-mentions

github ↗package ↗

INSTALL

IMPORT

SIG · RC-MENTIONS

rc-mentions

web-frameworkjavascriptv2.20.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Mentions

✓ import Mentions from 'rc-mentions';

✗ import { Mentions } from 'rc-mentions'; const Mentions = require('rc-mentions');

Mentions is a default export for ESM. For CommonJS, you might need `.default` depending on your setup.

Option

✓ import Mentions from 'rc-mentions'; const { Option } = Mentions;

✗ import { Option } from 'rc-mentions';

Option is a static property of the Mentions component, not a direct named export from the package root.

Style

✓ import 'rc-mentions/assets/index.less';

The component requires styles to be imported. This path refers to the Less source. You'll need a Less loader in your build setup, or compile to CSS manually and import the .css file.

MentionsProps

✓ import type { MentionsProps, OptionProps } from 'rc-mentions';

For TypeScript users, type definitions are included with the package.

This example demonstrates basic usage of `rc-mentions`, showing how to import the component, its required styles, define options, and render it in a React application. It includes placeholder text and simple `onSelect`/`onChange` handlers.

import React from 'react'; import ReactDOM from 'react-dom'; import Mentions from 'rc-mentions'; import 'rc-mentions/assets/index.less'; // Ensure your build system handles Less files const { Option } = Mentions; const MentionsDemo = () => ( <Mentions placeholder="Mention users here..." style={{ width: '100%' }} onSelect={(option, prefix) => console.log(`Selected ${option.value} with prefix ${prefix}`)} onChange={(value) => console.log('Current value:', value)} > <Option value="light">Light</Option> <Option value="bamboo">Bamboo</Option> <Option value="cat">Cat</Option> <Option value="dog">Dog</Option> <Option value="elephant">Elephant</Option> <Option value="fox">Fox</Option> </Mentions> ); const container = document.getElementById('root') || document.createElement('div'); if (!document.getElementById('root')) { container.id = 'root'; document.body.appendChild(container); } ReactDOM.render(<MentionsDemo />, container);

Debug

Known issues

breakingRecent release history in the project's GitHub mentions `@rc-component/mentions` at version `1.x.x` while the requested package is `rc-mentions` at `2.x.x`. This discrepancy suggests a potential package rename, internal restructuring, or a new generation of the component. Users should verify which package name aligns with their intended usage and consult the project's official documentation for migration paths if switching between `rc-mentions` and `@rc-component/mentions`.

fix

Check the project's README and documentation on GitHub (`react-component/mentions`) to confirm the correct package name and version for your needs. If migrating, review any provided upgrade guides.

affects: >=1.0.0

gotcha`rc-mentions` does not ship with pre-compiled CSS. The component's basic styling relies on importing its Less source file (`rc-mentions/assets/index.less`). Without proper processing of this Less file in your build pipeline, the component will appear unstyled and may not function visually as expected.

fix

Configure your build tool (e.g., Webpack, Rollup) to process `.less` files using a Less loader (`less-loader` for Webpack). Alternatively, you can pre-compile `index.less` to CSS and import the resulting `.css` file into your project.

affects: >=1.0.0

breakingThe package lists `react` and `react-dom` versions `>=16.9.0` as peer dependencies. Using older versions of React or React DOM can lead to runtime errors, unexpected behavior, or silent failures.

fix

Ensure your project's `react` and `react-dom` packages are updated to version `16.9.0` or newer to satisfy the peer dependency requirements. Run `npm install react@^16.9.0 react-dom@^16.9.0` or `yarn add react@^16.9.0 react-dom@^16.9.0`.

affects: <16.9.0

gotchaThe `Option` component is a static property of the `Mentions` component (i.e., `Mentions.Option`), not a standalone named export from the package root. Incorrectly attempting to import `Option` directly from `rc-mentions` can lead to `undefined` errors.

fix

Always access `Option` as a property of the `Mentions` component after it has been imported. For ESM, use `const { Option } = Mentions;`. For CommonJS, use `const Mentions = require('rc-mentions'); const Option = Mentions.Option;`.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'rc-mentions/assets/index.less' in '...'

The Less stylesheet required for basic styling is not being correctly resolved or processed by the build system.

fix

Ensure your build configuration (e.g., Webpack with `less-loader`) is set up to handle `.less` files, or pre-compile `index.less` to CSS and import the resulting `.css` file.

TypeError: Cannot read properties of undefined (reading 'Option') at Mentions

Attempting to destructure `Option` directly from the package or using `require` incorrectly for a static property.

fix

Access `Option` as a property of the `Mentions` component: `import Mentions from 'rc-mentions'; const { Option } = Mentions;`.

Invariant Violation: Minified React error #XXX; visit https://reactjs.org/docs/error-decoder.html?invariant=XXX for the full message or use the non-minified dev environment for full errors.

Often related to mismatched React versions with peer dependencies, specifically `react` or `react-dom` being older than `>=16.9.0`.

fix

Upgrade `react` and `react-dom` to `^16.9.0` or newer versions that satisfy the peer dependency requirements.

(Visual Issue) Mentions dropdown does not appear or is unstyled when typing.

The required `rc-mentions/assets/index.less` (or its compiled CSS) was not imported or applied to the component, resulting in missing styles for the dropdown and mention items.

fix

Add `import 'rc-mentions/assets/index.less';` to your entry file or component (and ensure your build system processes Less files), or ensure the compiled CSS is correctly linked.

Upgrade

Version history

2.20.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for all React components.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

42 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/react-component/mentions ↗

packagehttps://www.npmjs.com/package/rc-mentions ↗