react-componentrc-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-component/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\ | falseor 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
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.