Rc-mentions NPM | npm.io

2.19.1 • Published 10 months ago

Install

Weekly downloads

488,639

License

MIT

Repository

Last release

10 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 @poscredit/plugin-chart-boris crab-components antd4-x jingzhi-ui jingsheng-antd jlltd ked-pc kedesign kenshin kts-components-antd-x3 kts-components-antd-x4 idm-react-antd hz-antd ichintui infrad hztd huaxin-antd hdm-antd hrwuucc hecom-ui hcfd lijj linkmore-design lw_test_ui manyid mark15 kyligence-antd ldesign knowdesign knew-ui meey-crm @whalecloud/wcap @wuxh/antd @tiddh/brave-react @tubui/cr @touch-physio/antd @toughou/antd @teranich/antd @unovo/antd @yatping/antd @yizhou-library/core aloha-antd a-lib-a-fw aiot-antd-ui abc-antd antd-dts antd-bonree-test antd-customization antd-cly antd-darcytech antd-design-extend antd-benson-com antd-zjk antd3x antd5_compatible4 antd-x4 antd-v3 antd-v3-master antd-v3-smithyj antd-v5 antd-yzh

10 months ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year 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

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

4 years ago

4 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

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

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago