rc-mentions

What is rc-mentions?

The rc-mentions npm package is designed to provide a React component for implementing mention features within applications. It allows users to easily mention people, tags, or other entities in text inputs or textareas by typing a trigger character (like '@') followed by a list of suggestions.

What are rc-mentions's main functionalities?

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

Other packages similar to rc-mentions

react-mentions

react-mentions is another popular package for implementing mentions in React applications. It offers similar functionalities to rc-mentions, such as customizable triggers and rendering options. However, react-mentions might provide a different API or additional features like asynchronous loading of suggestions.

draft-js-mention-plugin

This package is a plugin for the Draft.js framework, designed to add mention capabilities to rich text editors built with Draft.js. While it serves a similar purpose to rc-mentions, draft-js-mention-plugin is specifically tailored for Draft.js editors and offers deep integration with the Draft.js ecosystem.

README

rc-mentions

Screenshots

Feature

• support ie9,ie9+,chrome,firefox,safari

Keyboard

• Open mentions (focus input || focus and click)
• KeyDown/KeyUp/Enter to navigate menu

install

Usage

basic use

/**
 * inline: true
 */
import Mentions from 'rc-mentions';
// Import the default styles
import './index.less';

const { Option } = Mentions;

var Demo = (
  <Mentions>
    <Option value="light">Light</Option>
    <Option value="bamboo">Bamboo</Option>
    <Option value="cat">Cat</Option>
  </Mentions>
);
React.render(<Demo />, container);

Note: We use index.less for styling, you can convert them into css and properly reference them to the code above.

API

Mentions props

name	description	type	default
autoFocus	Auto get focus when component mounted	boolean	false
defaultValue	Default value	string	-
filterOption	Customize filter option logic	false | (input: string, option: OptionProps) => boolean	-
notFoundContent	Set mentions content when not match	ReactNode	'Not Found'
placement	Set popup placement	'top' | 'bottom'	'bottom'
direction	Set popup direction	'ltr' | 'rtl'	'ltr'
prefix	Set trigger prefix keyword	string | string[]	'@'
rows	Set row count	number	1
split	Set split string before and after selected mention	string	' '
silent	Used in transition phase, does not respond to keyboard enter events when equal to true	boolean	false
validateSearch	Customize trigger search logic	(text: string, props: MentionsProps) => void	-
value	Set value of mentions	string	-
onChange	Trigger when value changed	(text: string) => void	-
onKeyDown	Trigger when user hits a key	React.KeyboardEventHandler<HTMLTextAreaElement>	-
onKeyUp	Trigger when user releases a key	React.KeyboardEventHandler<HTMLTextAreaElement>	-
onSelect	Trigger when user select the option	(option: OptionProps, prefix: string) => void	-
onSearch	Trigger when prefix hit	(text: string, prefix: string) => void	-
onFocus	Trigger when mentions get focus	React.FocusEventHandler<HTMLTextAreaElement>	-
onBlur	Trigger when mentions lose focus	React.FocusEventHandler<HTMLTextAreaElement>	-
getPopupContainer	DOM Container for suggestions	() => HTMLElement	-
autoSize	Textarea height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 }	boolean | object	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-
onResize	The callback function that is triggered when textarea resize	function({ width, height })	-

Methods

name	description
focus()	Component get focus
blur()	Component lose focus

Development

npm install
npm start

Example

http://localhost:9001/

online example: http://react-component.github.io/mentions/

Test Case

npm test

Coverage

npm run coverage

License

rc-mentions is released under the MIT license.