react-mention-input 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -0
- package/package.json +7 -2
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
|
|
2
|
+
# react-mention-input
|
|
3
|
+
|
|
4
|
+
A React component for input with `@mention` functionality, built using TypeScript. This component allows users to mention other users by typing `@`, followed by user suggestions based on the input.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
To install the package, use the following command:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install react-mention-input
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
Here's a basic example of how to use the `MentionInput` component in your React project:
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import React from 'react';
|
|
20
|
+
import { MentionInput } from 'react-mention-input';
|
|
21
|
+
|
|
22
|
+
const users = [
|
|
23
|
+
{ id: 1, name: 'John Heart' },
|
|
24
|
+
{ id: 2, name: 'Olivia Peyton' },
|
|
25
|
+
{ id: 3, name: 'Kevin Carter' },
|
|
26
|
+
// Add more users as needed
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
|
|
32
|
+
<h2>React Mention Input Demo</h2>
|
|
33
|
+
<MentionInput users={users} placeholder="Type @ to mention someone..." />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export default App;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Required | Description |
|
|
44
|
+
|---------------|----------------|----------|-----------------------------------------------------------|
|
|
45
|
+
| `users` | `User[]` | Yes | An array of user objects to display as suggestions. |
|
|
46
|
+
| `placeholder` | `string` | No | A placeholder for the input field. Defaults to an empty string. |
|
|
47
|
+
|
|
48
|
+
### `User` Type
|
|
49
|
+
|
|
50
|
+
The `User` type should be an object with the following structure:
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
interface User {
|
|
54
|
+
id: number;
|
|
55
|
+
name: string;
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Features
|
|
60
|
+
|
|
61
|
+
- **Real-time user suggestions**: Shows a dropdown of user suggestions as the user types `@` followed by letters.
|
|
62
|
+
- **Customizable placeholder**: Set a custom placeholder for the input field.
|
|
63
|
+
- **Easy integration**: Simple to use in any React project.
|
|
64
|
+
|
|
65
|
+
## Styling
|
|
66
|
+
|
|
67
|
+
The component includes basic inline styles for the input and suggestion list. You can customize it further with your own CSS as needed.
|
|
68
|
+
|
|
69
|
+
## License
|
|
70
|
+
|
|
71
|
+
This project is licensed under the [ISC License](LICENSE).
|
|
72
|
+
|
|
73
|
+
## Author
|
|
74
|
+
|
|
75
|
+
Created by [Your Name].
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
Feel free to contribute or report any issues on the [GitHub repository](#).
|
package/package.json
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-mention-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
7
7
|
"build": "tsc"
|
|
8
8
|
},
|
|
9
|
-
"keywords": [
|
|
9
|
+
"keywords": [
|
|
10
|
+
"mention",
|
|
11
|
+
"input",
|
|
12
|
+
"autocomplete",
|
|
13
|
+
"user suggestions"
|
|
14
|
+
],
|
|
10
15
|
"author": "",
|
|
11
16
|
"license": "ISC",
|
|
12
17
|
"description": "",
|