{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-mentions"],"cli":null},"imports":["import Mentions from 'rc-mentions';","import Mentions from 'rc-mentions';\nconst { Option } = Mentions;","import 'rc-mentions/assets/index.less';","import type { MentionsProps, OptionProps } from 'rc-mentions';"],"auth":{"required":false,"env_vars":[]},"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  <Mentions\n    placeholder=\"Mention users here...\"\n    style={{ width: '100%' }}\n    onSelect={(option, prefix) => console.log(`Selected ${option.value} with prefix ${prefix}`)}\n    onChange={(value) => console.log('Current value:', value)}\n  >\n    <Option value=\"light\">Light</Option>\n    <Option value=\"bamboo\">Bamboo</Option>\n    <Option value=\"cat\">Cat</Option>\n    <Option value=\"dog\">Dog</Option>\n    <Option value=\"elephant\">Elephant</Option>\n    <Option value=\"fox\">Fox</Option>\n  </Mentions>\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(<MentionsDemo />, 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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}