React Mentions Component

Common errors

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

  cause 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

  cause 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.

  cause 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.

  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.
  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.

Warnings

• breaking 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`.
  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.
• 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.
• breaking 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.
  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`.
• gotcha 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.
  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;`.

Install

• npm install rc-mentions npm
• yarn add rc-mentions yarn
• pnpm add rc-mentions pnpm

Imports

• Mentions
  wrong:

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

  correct:

  import Mentions from 'rc-mentions';

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

  import { Option } from 'rc-mentions';

  correct:

  import Mentions from 'rc-mentions';
  const { Option } = 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.

Quickstart

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);