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