React-mention-input NPM

react-mention-input

A React component library that provides two main components:

MentionInput - An input field with @mention functionality.
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

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,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' \| '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

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