rc-mentions

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.

Similar packages

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.