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.