{"id":14860,"library":"rc-mentions","title":"React Mentions Component","description":"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.","status":"active","version":"2.20.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/mentions","tags":["javascript","react","react-component","react-mentions","mentions","typescript"],"install":[{"cmd":"npm install rc-mentions","lang":"bash","label":"npm"},{"cmd":"yarn add rc-mentions","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-mentions","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Mentions is a default export for ESM. For CommonJS, you might need `.default` depending on your setup.","wrong":"import { Mentions } from 'rc-mentions';\nconst Mentions = require('rc-mentions');","symbol":"Mentions","correct":"import Mentions from 'rc-mentions';"},{"note":"Option is a static property of the Mentions component, not a direct named export from the package root.","wrong":"import { Option } from 'rc-mentions';","symbol":"Option","correct":"import Mentions from 'rc-mentions';\nconst { Option } = Mentions;"},{"note":"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.","symbol":"Style","correct":"import 'rc-mentions/assets/index.less';"},{"note":"For TypeScript users, type definitions are included with the package.","symbol":"MentionsProps","correct":"import type { MentionsProps, OptionProps } from 'rc-mentions';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Mentions from 'rc-mentions';\nimport 'rc-mentions/assets/index.less'; // Ensure your build system handles Less files\n\nconst { Option } = Mentions;\n\nconst MentionsDemo = () => (\n console.log(`Selected ${option.value} with prefix ${prefix}`)}\n onChange={(value) => console.log('Current value:', value)}\n >\n \n \n \n \n \n \n \n);\n\nconst container = document.getElementById('root') || document.createElement('div');\nif (!document.getElementById('root')) {\n container.id = 'root';\n document.body.appendChild(container);\n}\n\nReactDOM.render(, container);","lang":"javascript","description":"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."},"warnings":[{"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.","message":"Recent 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`.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"The 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.","severity":"breaking","affected_versions":"<16.9.0"},{"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;`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The Less stylesheet required for basic styling is not being correctly resolved or processed by the build system.","error":"Module not found: Can't resolve 'rc-mentions/assets/index.less' in '...'"},{"fix":"Access `Option` as a property of the `Mentions` component: `import Mentions from 'rc-mentions'; const { Option } = Mentions;`.","cause":"Attempting to destructure `Option` directly from the package or using `require` incorrectly for a static property.","error":"TypeError: Cannot read properties of undefined (reading 'Option') at Mentions"},{"fix":"Upgrade `react` and `react-dom` to `^16.9.0` or newer versions that satisfy the peer dependency requirements.","cause":"Often related to mismatched React versions with peer dependencies, specifically `react` or `react-dom` being older than `>=16.9.0`.","error":"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."},{"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.","cause":"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.","error":"(Visual Issue) Mentions dropdown does not appear or is unstyled when typing."}],"ecosystem":"npm"}