react-mention-input

A React component library that provides two main components:

1. MentionInput - An input field with @mention functionality.
2. ShowMessageCard - A card component for displaying user messages with name, date, and image.

Installation

Install the package using npm or yarn:

1npm install react-mention-input

or

1yarn add react-mention-input

Components

1. MentionInput

A customizable input component with @mention functionality.

Props

Prop Name	Type	Description
users	User[]	Array of user objects to display in suggestions.
placeholder	string	Placeholder text for the input.
containerClassName	string	Custom class name for the container.
inputContainerClassName	string	Custom class name for the input container.
inputClassName	string	Custom class name for the input field.
sendBtnClassName	string	Custom class name for the send button.
suggestionListClassName	string	Custom class name for the suggestion list.
suggestionItemClassName	string	Custom class name for each suggestion item.
sendButtonIcon	ReactNode	Custom icon for the send button (MUI icon or image path).
onSendMessage	(obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void	Callback function triggered on sending a message, providing both plain text, HTML and userName.
suggestionPosition	`'top'	'bottom'

Example Usage

1import React from 'react';
2import MentionInput from 'react-mention-input';
3
4const users = [
5  { id: 1, name: 'John Doe' },
6  { id: 2, name: 'Jane Smith' }
7];
8
9function App() {
10  const handleSendMessage = ({messageText, messageHTML}) => {
11    console.log('Message Text:', messageText);
12    console.log('Message HTML:', messageHTML);
13  };
14
15  return (
16    <MentionInput
17      users={users}
18      placeholder="Type @ to mention someone..."
19      sendButtonIcon={<SendIcon />} // Optional MUI icon or image path
20      onSendMessage={handleSendMessage}
21      suggestionPosition="top" // Customize suggestion position (top, bottom, left, right)
22    />
23  );
24}
25
26export default App;

2. ShowMessageCard

A customizable card component for displaying messages with user details.

Props

Prop Name	Type	Description
data	MessageCardProps[]	Array of message card objects to display.
nameKey	string	Custom key for the user name.
dateKey	string	Custom key for the date.
commentKey	string	Custom key for the comment.
imgSrcKey	string	Custom key for the image source.
containerClassName	string	Custom class name for the outer container.
containerStyle	CSSProperties	Inline styles for the outer container.
cardClassName	string	Custom class name for the card.
cardStyle	CSSProperties	Inline styles for the card.
imgClassName	string	Custom class name for the image or initials.
imgStyle	CSSProperties	Inline styles for the image or initials.
renderItem	(element: MessageCardProps) => ReactNode	Custom render function for card content.

MessageCardProps Interface:

1interface MessageCardProps {
2  id: number;
3  name: string;
4  date: string;
5  comment: string;
6  imgSrc: string;
7}

Example Usage

Default Rendering

1import React from 'react';
2import {ShowMessageCard} from 'react-mention-input';
3
4const messageData = [
5  {
6    id: 1,
7    name: 'John Doe',
8    date: '19-11-24',
9    comment: 'This is a comment.',
10    imgSrc: 'path/to/image.jpg'
11  },
12  {
13    id: 2,
14    name: 'Jane Smith',
15    date: '19-11-24',
16    comment: 'Another comment.',
17    imgSrc: ''
18  }
19];
20
21function App() {
22  return (
23    <ShowMessageCard
24      data={messageData}
25      cardClassName="custom-card"
26      cardStyle={{ border: '1px solid #ddd' }}
27      imgClassName="custom-img"
28      imgStyle={{ borderRadius: '50%' }}
29    />
30  );
31}
32
33export default App;

Custom Keys and Styling

1<ShowMessageCard
2  data={messageData}
3  nameKey="user_name"
4  dateKey="custom_date"
5  commentKey="custom_comment"
6  imgSrcKey="custom_imgSrc"
7  containerClassName="custom-container"
8  containerStyle={{ margin: '20px' }}
9  cardClassName="custom-card"
10  cardStyle={{ border: '2px solid #007BFF' }}
11  imgClassName="custom-image"
12  imgStyle={{ borderRadius: '50%' }}
13  nameClassName="custom-name"
14  nameStyle={{ fontSize: '20px', color: '#333' }}
15  dateClassName="custom-date"
16  dateStyle={{ fontSize: '14px', color: '#777' }}
17  commentClassName="custom-comment"
18  commentStyle={{ fontStyle: 'italic' }}
19/>

Custom Rendering

1<ShowMessageCard
2  data={messageData}
3  renderItem={(element) => (
4    <>
5      <div style={{ fontWeight: 'bold', fontSize: '18px' }}>{element.user_name}</div>
6      <div style={{ color: '#777', fontSize: '14px' }}>{element.custom_date}</div>
7      <div style={{ marginTop: '8px', fontStyle: 'italic' }}>{element.custom_comment}</div>
8    </>
9  )}
10/>

---

Features

1. Dynamic Keys: Use custom keys for fields like name, date, comment, and image.
2. Custom Styling: Pass CSS classes or inline styles for full customization.
3. Custom Rendering: Override default rendering with a custom renderItem function.

---

License

This project is licensed under the ISC License.