UNPKG

4.41 kBMarkdownView Raw
1# rc-mentions
2---
3
4React Mentions
5
6[![NPM version][npm-image]][npm-url]
7[![build status][travis-image]][travis-url]
8[![Test coverage][codecov-image]][codecov-url]
9[![Dependencies](https://img.shields.io/david/react-component/mentions.svg?style=flat-square)](https://david-dm.org/react-component/mentions)
10[![DevDependencies](https://img.shields.io/david/dev/react-component/mentions.svg?style=flat-square)](https://david-dm.org/react-component/mentions?type=dev)
11[![npm download][download-image]][download-url]
12[![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://github.com/react-component/mentions)
13
14[Storybook]: https://github.com/storybooks/press/blob/master/badges/storybook.svg
15[npm-image]: http://img.shields.io/npm/v/rc-mentions.svg?style=flat-square
16[npm-url]: http://npmjs.org/package/rc-mentions
17[travis-image]: https://img.shields.io/travis/react-component/mentions.svg?style=flat-square
18[travis-url]: https://travis-ci.org/react-component/mentions
19[codecov-image]: https://img.shields.io/codecov/c/github/react-component/mentions.svg?style=flat-square
20[codecov-url]: https://codecov.io/gh/react-component/mentions/branch/master
21[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
22[node-url]: http://nodejs.org/download/
23[download-image]: https://img.shields.io/npm/dm/rc-mentions.svg?style=flat-square
24[download-url]: https://npmjs.org/package/rc-mentions
25
26## Screenshots
27
28<img src="https://user-images.githubusercontent.com/5378891/57270992-2fd48780-70c0-11e9-91ae-c614d0b49a45.png" />
29
30## Feature
31
32* support ie9,ie9+,chrome,firefox,safari
33
34### Keyboard
35
36* Open mentions (focus input || focus and click)
37* KeyDown/KeyUp/Enter to navigate menu
38
39## install
40
41[![rc-mentions](https://nodei.co/npm/rc-mentions.png)](https://npmjs.org/package/rc-mentions)
42
43## Usage
44
45### basic use
46
47```js
48import Mentions from 'rc-mentions';
49
50const { Option } = Mentions;
51
52var Demo = (
53 <Mentions>
54 <Option value="light">Light</Option>
55 <Option value="bamboo">Bamboo</Option>
56 <Option value="cat">Cat</Option>
57 </Mentions>
58);
59React.render(<Demo />, container);
60```
61
62## API
63
64### Mentions props
65
66| name | description | type | default |
67|----------|----------------|----------|--------------|
68| autoFocus | Auto get focus when component mounted | boolean | `false` |
69| defaultValue | Default value | string | - |
70| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
71| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
72| placement | Set popup placement | 'top' \| 'bottom' | 'bottom' |
73| direction | Set popup direction | 'ltr' \| 'rtl' | 'ltr' |
74| prefix | Set trigger prefix keyword | string \| string[] | '@' |
75| rows | Set row count | number | 1 |
76| split | Set split string before and after selected mention | string | ' ' |
77| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
78| value | Set value of mentions | string | - |
79| onChange | Trigger when value changed |(text: string) => void | - |
80| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
81| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
82| onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
83| onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
84| getPopupContainer | DOM Container for suggestions | () => HTMLElement | - |
85| autoSize | Textarea height autosize feature, can be set to `true\|false` or an object `{ minRows: 2, maxRows: 6 }` | boolean \| object | - |
86| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |
87| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |
88
89### Methods
90
91| name | description |
92|----------|----------------|
93| focus() | Component get focus |
94| blur() | Component lose focus |
95
96## Development
97
98```
99npm install
100npm start
101```
102
103## Example
104
105http://localhost:9001/
106
107online example: http://react-component.github.io/mentions/
108
109## Test Case
110
111```
112npm test
113```
114
115## Coverage
116
117```
118npm run coverage
119```
120
121
122## License
123
124rc-mentions is released under the MIT license.