rc-mentions

Basic Mentioning

This feature allows for basic mentioning functionality where users can type '@' followed by a list of predefined suggestions. The code sample demonstrates how to set up a basic Mention component with a default value and a list of suggestions.

import React from 'react';
import Mention from 'rc-mentions';
const { Option } = Mention;

function App() {
  return (
    <Mention
      style={{ width: '100%' }}
      defaultValue="@afc163"
      suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    />
  );
}

Custom Trigger

This feature allows users to customize the trigger character for mentions. In this example, both '@' and '#' are set as triggers, enabling mentions for users as well as tags or other entities.

import React from 'react';
import Mention from 'rc-mentions';
const { Option } = Mention;

function App() {
  return (
    <Mention
      style={{ width: '100%' }}
      prefix={['@', '#']}
      suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
    />
  );
}

Custom Render

This feature allows for custom rendering of suggestions. The code sample shows how to use the Option component to customize how suggestions are displayed, providing more flexibility in the presentation of suggestions.

import React from 'react';
import Mention from 'rc-mentions';
const { Option } = Mention;

function App() {
  return (
    <Mention
      style={{ width: '100%' }}
      suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'].map(value => (
        <Option key={value} value={value}>
          {value}
        </Option>
      ))}
    />
  );
}