rc-mentions
TypeScript icon, indicating that this package has built-in type declarations

2.11.1 • Public • Published

rc-mentions

NPM version npm download build status Codecov bundle size dumi

Screenshots

Feature

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

Keyboard

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

install

rc-mentions

Usage

basic use

/**
 * inline: true
 */
import Mentions from 'rc-mentions';

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

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 ' '
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.

Package Sidebar

Install

npm i rc-mentions

Weekly Downloads

1,099,834

Version

2.11.1

License

MIT

Unpacked Size

74.7 kB

Total Files

35

Last publish

Collaborators

  • afc163
  • zombiej
  • madccc