README.md 4.3 KB

rc-mentions


React Mentions

NPM version build status Test coverage Dependencies DevDependencies npm download Storybook

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

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'
direction Set popup direction 'ltr' \ 'rtl'
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 -
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 -
onBlur Trigger when mentions lose focus React.FocusEventHandler -
getPopupContainer DOM Container for suggestions () => HTMLElement -
autoSize Textarea height autosize feature, can be set to `true\ falseor an object{ minRows: 2, maxRows: 6 }` boolean \
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.