{"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,"search_vec":"'2':70 '2.20.0':46 'access':95 'activ':48,62 'allow':101 'api':99 'applic':21 'broad':83 'browser':84 'build':14 'chrome':88 'compat':85 'compon':3,11,142 'control':104 'core':25 'css':126 'current':43 'customiz':36 'data':78 'design':12,136 'develop':102,121 'dictat':39 'differenti':80 'experi':37 'filter':106 'firefox':89 'flexibl':98 'foundat':9 'frequent':51 'full':103 'function':18 'high':35 'ie9':87 'immedi':73 'includ':81 'indic':56 'input':17 'integr':133 'javascript':138 'key':79 'keyboard':92 'less':130 'librari':114 'logic':26 'maintain':49 'major':68 'mention':2,6,16,32,117,145,146 'minor':52 'navig':93 'note':66 'offer':33 'opinion':112 'option':107 'patch':54 'placement':110 'popup':109 'project':59 'provid':23,77,123 'rc':5,116 'rc-mention':4,115 'react':1,10,139,141,144 'react-compon':140 'react-ment':143 'recent':61 'releas':55,65 'requir':120 'rich':15 'robust':91 'safari':90 'ship':118 'sourc':131 'specif':40,64 'stabl':44 'structur':29 'style':41 'support':86 'system':137 'though':63 'typescript':147 'typic':127 'ui':28,113 'unlik':111 'unstyl':119 'user':31 'version':45,69 'visibl':74 'web':20 'within':19 'without':38","created_at":"2026-04-20T18:43:59.751076+00:00","updated_at":"2026-04-20T18:43:59.751076+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/react-component/mentions","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rc-mentions","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","crm-productivity"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}