react-mention-input/README.md

A React component for input with @mention functionality.

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

```bash
npm install react-mention-input
```
or
```bash
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

```tsx
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**:
```typescript
interface MessageCardProps {
  id: number;
  name: string;
  date: string;
  comment: string;
  imgSrc: string;
}
```

#### Example Usage

##### Default Rendering
```tsx
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
```tsx
<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
```tsx
<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.