Rc-mentions NPM | npm.io

2.19.1 • Published 6 months ago

Install

Weekly downloads

488,639

License

MIT

Repository

Last release

6 months ago

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.

react react-component react-mentions mentions

@babel/runtime @rc-component/trigger classnames rc-input rc-menu rc-textarea rc-util

@bushuai/uni-test yzhantd antd-zp g2_v587_gv587_admin jdc-rc-common test-rc-common find-react uibot-ui-antd signpl signpl-test @netty0911/rc-mentions addnewer-ui antds xc-mobile xcmobiles @voplus/antd @cliffdotai/atomic onlinex-test @dibanka/demo xqshoutenn-ui @baolq/antd guree-ui sia-antd @everything-registry/sub-chunk-2535 intelligent-design swdx t123456-antd test-iki-mini-app wit-antd wowworks-antd xm-antd4x wy-ufo xenera-ui-components superset-plugin-chart-hello-world2 stong-ui stpass-antd testbhuhu swiftcrab @cscec/udp-antd-base @cybernomads/antd-fork @cuong.lv2/modal-form @bytedance/mona-ui @poscredit/plugin-chart-boris @ruiwin/antd crab-components antd4-x jingzhi-ui jingsheng-antd jlltd ked-pc kedesign kenshin kts-components-antd-x3 kts-components-antd-x4 @vs-new/antd ued-component-r spk-antd sps-antd4 super21cake td-ui uc-antd ui-components-pro towlang-antd tqsk-antd @apg.gg/core @adrianjiang/rc-mentions @ahri-ui/core @b-design/antd @batbayar/superset-plugin-chart-hello-world @cfxjs/antd @cliffdotai/antd 4399ywkf-design 128981semzub 4leaf-antd @adactiveasia/antd @dibanka/ui ym-antd-package-test ym-antd ygd yh-antd yi-design yp-antd zubtesttoday wax-prosemirror-services vimo-sketches uno-design uniubiui znly-ui xt-design @e-tool/euid @feedloop/feedloop-antd @firesoon/antd @easyv/ezvui @easyv/antd @greendeck/atomic @greendeck/atomic-rakuten @greenatom/antd @gsaandy/antd @fish-kit/fish

6 months ago

6 months ago

7 months ago

8 months ago

10 months ago

11 months ago

1 year ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago