dw-neit-rc-mentions
v1.9.2
Published
React Mentions
Downloads
99
Maintainers
Readme
dw-neit-rc-mentions
React 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
import Mentions from 'dw-neit-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 | - |
| onKeyUp | Trigger when user releases a key | React.KeyboardEventHandler | - |
| 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\|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
dw-neit-rc-mentions is released under the MIT license.