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:

npm install react-mention-input

or

yarn 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}) => void | Callback function triggered on sending a message, providing both plain text and HTML. | | suggestionPosition | 'top' | 'bottom' | 'left' | 'right' | Position of the suggestion dropdown relative to the input. Default is bottom. |

Example Usage

import React from 'react';
import MentionInput from 'react-mention-input';

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Smith' }
];

function App() {
  const handleSendMessage = ({messageText, messageHTML}) => {
    console.log('Message Text:', messageText);
    console.log('Message HTML:', messageHTML);
  };

  return (
    <MentionInput
      users={users}
      placeholder="Type @ to mention someone..."
      sendButtonIcon={<SendIcon />} // Optional MUI icon or image path
      onSendMessage={handleSendMessage}
      suggestionPosition="top" // Customize suggestion position (top, bottom, left, right)
    />
  );
}

export 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:

interface MessageCardProps {
  id: number;
  name: string;
  date: string;
  comment: string;
  imgSrc: string;
}

Example Usage

Default Rendering

import React from 'react';
import {ShowMessageCard} from 'react-mention-input';

const messageData = [
  {
    id: 1,
    name: 'John Doe',
    date: '19-11-24',
    comment: 'This is a comment.',
    imgSrc: 'path/to/image.jpg'
  },
  {
    id: 2,
    name: 'Jane Smith',
    date: '19-11-24',
    comment: 'Another comment.',
    imgSrc: ''
  }
];

function App() {
  return (
    <ShowMessageCard
      data={messageData}
      cardClassName="custom-card"
      cardStyle={{ border: '1px solid #ddd' }}
      imgClassName="custom-img"
      imgStyle={{ borderRadius: '50%' }}
    />
  );
}

export default App;

Custom Keys and Styling

<ShowMessageCard
  data={messageData}
  nameKey="user_name"
  dateKey="custom_date"
  commentKey="custom_comment"
  imgSrcKey="custom_imgSrc"
  containerClassName="custom-container"
  containerStyle={{ margin: '20px' }}
  cardClassName="custom-card"
  cardStyle={{ border: '2px solid #007BFF' }}
  imgClassName="custom-image"
  imgStyle={{ borderRadius: '50%' }}
  nameClassName="custom-name"
  nameStyle={{ fontSize: '20px', color: '#333' }}
  dateClassName="custom-date"
  dateStyle={{ fontSize: '14px', color: '#777' }}
  commentClassName="custom-comment"
  commentStyle={{ fontStyle: 'italic' }}
/>

Custom Rendering

<ShowMessageCard
  data={messageData}
  renderItem={(element) => (
    <>
      <div style={{ fontWeight: 'bold', fontSize: '18px' }}>{element.user_name}</div>
      <div style={{ color: '#777', fontSize: '14px' }}>{element.custom_date}</div>
      <div style={{ marginTop: '8px', fontStyle: 'italic' }}>{element.custom_comment}</div>
    </>
  )}
/>

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.