react-mention-input 1.0.12 → 1.0.14

package/README.md

@@ -43,7 +43,7 @@ A customizable input component with @mention functionality.
 
 ```tsx
 import React from 'react';
-import {MentionInput} from 'react-mention-input';
+import MentionInput from 'react-mention-input';
 
 const users = [
   { id: 1, name: 'John Doe' },
@@ -74,13 +74,20 @@ A customizable card component for displaying messages with user details.
 
 #### Props
 
-| Prop Name        | Type                | Description |
-|------------------|---------------------|-------------|
-| `data`           | `MessageCardProps[]`| Array of message card objects to display. |
-| `cardClassName`  | `string`            | Custom class name for the card. |
-| `cardStyle`      | `CSSProperties`     | Custom inline style for the card. |
-| `imgClassName`   | `string`            | Custom class name for the image. |
-| `imgStyle`       | `CSSProperties`     | Custom inline style for the image. |
+| 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
@@ -95,6 +102,7 @@ interface MessageCardProps {
 
 #### Example Usage
 
+##### Default Rendering
 ```tsx
 import React from 'react';
 import {ShowMessageCard} from 'react-mention-input';
@@ -112,7 +120,7 @@ const messageData = [
     name: 'Jane Smith',
     date: '19-11-24',
     comment: 'Another comment.',
-    imgSrc: 'path/to/image2.jpg'
+    imgSrc: ''
   }
 ];
 
@@ -130,5 +138,54 @@ function App() {
 
 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.

package/dist/MentionInput.d.ts

@@ -16,5 +16,5 @@ interface MentionInputProps {
     sendButtonIcon?: ReactNode;
     onSendMessage?: (message: string) => void;
 }
-export declare const MentionInput: React.FC<MentionInputProps>;
-export {};
+declare const MentionInput: React.FC<MentionInputProps>;
+export default MentionInput;

package/dist/MentionInput.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './MentionInput.css'; // Import the SCSS file
-export var MentionInput = function (_a) {
+var MentionInput = function (_a) {
     var users = _a.users, placeholder = _a.placeholder, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage;
     var _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
     var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
@@ -45,3 +45,4 @@ export var MentionInput = function (_a) {
             React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || '') }, sendButtonIcon ? (typeof sendButtonIcon === 'string' ? (React.createElement("img", { src: sendButtonIcon, alt: "Send Icon", style: { width: '20px', height: '20px' } })) : (sendButtonIcon)) : ('➤'))),
         showSuggestions && (React.createElement("ul", { className: "suggestion-list ".concat(suggestionListClassName || '') }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || '') }, user.name)); })))));
 };
+export default MentionInput;

package/dist/ShowMessageCard.css

@@ -1,40 +1,69 @@
+.message-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px; /* Space between cards */
+}
+
 .message-card {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    padding: 16px;
-    background-color: #fff;
-    transition: box-shadow 0.2s;
-  }
-  
-  .message-card:hover {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  }
-  
-  .message-card-img {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    margin-right: 16px;
-  }
-  
-  .message-card-info {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .message-card-name {
-    font-size: 18px;
-    font-weight: bold;
-  }
-  
-  .message-card-date {
-    font-size: 14px;
-    color: #888;
-  }
-  
-  .message-card-comment {
-    font-size: 16px;
-  }
-  
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #fff;
+  transition: box-shadow 0.2s;
+}
+
+.message-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.message-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px; /* Space between header and body */
+}
+
+.message-card-img,
+.message-card-initials {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007bff;
+  text-transform: uppercase;
+  margin-right: 16px;
+}
+.message-card-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-card-name {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1.2; /* Adjust line height for better spacing */
+}
+
+.message-card-date {
+  margin: 0;
+  font-size: 14px;
+  color: #888;
+  line-height: 1.2; /* Adjust line height for better spacing */
+}
+
+.message-card-body {
+  margin-top: 8px; /* Space between header and comment */
+}
+
+.message-card-comment {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.5; /* Optimal line height for readability */
+}

package/dist/ShowMessageCard.d.ts

@@ -1,18 +1,33 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import './ShowMessageCard.css';
 interface MessageCardProps {
-    id: number;
-    name: string;
-    date: string;
-    comment: string;
-    imgSrc: string;
+    [key: string]: any;
 }
 interface ShowMessageCardProps {
     data: MessageCardProps[];
+    nameKey?: string;
+    dateKey?: string;
+    commentKey?: string;
+    imgSrcKey?: string;
+    containerClassName?: string;
+    containerStyle?: CSSProperties;
     cardClassName?: string;
     cardStyle?: CSSProperties;
+    headerClassName?: string;
+    headerStyle?: CSSProperties;
     imgClassName?: string;
     imgStyle?: CSSProperties;
+    infoClassName?: string;
+    infoStyle?: CSSProperties;
+    nameClassName?: string;
+    nameStyle?: CSSProperties;
+    dateClassName?: string;
+    dateStyle?: CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    commentClassName?: string;
+    commentStyle?: CSSProperties;
+    renderItem?: (element: MessageCardProps) => ReactNode;
 }
 export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
 export {};

package/dist/ShowMessageCard.js

@@ -1,13 +1,32 @@
-import React from 'react';
-import './ShowMessageCard.css'; // Import the CSS file
+import React, { useState } from 'react';
+import './ShowMessageCard.css';
 export var ShowMessageCard = function (_a) {
-    var data = _a.data, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle;
-    return (React.createElement("div", { className: "message-card-container" }, data.map(function (item) { return (React.createElement("div", { key: item.id, className: "message-card ".concat(cardClassName || ''), style: cardStyle },
-        React.createElement("div", { className: "message-card-header" },
-            React.createElement("img", { src: item.imgSrc || 'default-image.png', alt: item.name, className: "message-card-img ".concat(imgClassName || ''), style: imgStyle }),
-            React.createElement("div", { className: "message-card-info" },
-                React.createElement("h3", { className: "message-card-name" }, item.name),
-                React.createElement("p", { className: "message-card-date" }, item.date))),
-        React.createElement("div", { className: "message-card-body" },
-            React.createElement("p", { className: "message-card-comment" }, item.comment)))); })));
+    var data = _a.data, _b = _a.nameKey, nameKey = _b === void 0 ? 'name' : _b, _c = _a.dateKey, dateKey = _c === void 0 ? 'date' : _c, _d = _a.commentKey, commentKey = _d === void 0 ? 'comment' : _d, _e = _a.imgSrcKey, imgSrcKey = _e === void 0 ? 'imgSrc' : _e, containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, renderItem = _a.renderItem // Custom render function
+    ;
+    var getInitials = function (name) {
+        var nameParts = name.split(' ');
+        var initials = nameParts
+            .map(function (part) { var _a; return ((_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || ''; }) // Take the first letter of each part
+            .slice(0, 2) // Limit to 2 letters
+            .join('');
+        return initials;
+    };
+    return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ''), style: containerStyle }, data.map(function (item, index) {
+        if (renderItem) {
+            // Use custom render function if provided
+            return (React.createElement(React.Fragment, { key: item.id || index }, renderItem(item)));
+        }
+        var _a = useState(false), showInitials = _a[0], setShowInitials = _a[1];
+        var handleImageError = function () {
+            setShowInitials(true);
+        };
+        return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ''), style: cardStyle },
+            React.createElement("div", { className: "message-card-header ".concat(headerClassName || ''), style: headerStyle },
+                showInitials || !item[imgSrcKey] ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ''), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement("img", { src: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ''), style: imgStyle, onError: handleImageError })),
+                React.createElement("div", { className: "message-card-info ".concat(infoClassName || ''), style: infoStyle },
+                    React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ''), style: nameStyle }, item[nameKey]),
+                    React.createElement("p", { className: "message-card-date ".concat(dateClassName || ''), style: dateStyle }, item[dateKey]))),
+            React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ''), style: bodyStyle },
+                React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ''), style: commentStyle }, item[commentKey]))));
+    })));
 };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { MentionInput } from './MentionInput';
+export { default as MentionInput } from './MentionInput';
 export { ShowMessageCard } from './ShowMessageCard';

package/dist/index.js

@@ -1,2 +1,2 @@
-export { MentionInput } from './MentionInput';
+export { default as MentionInput } from './MentionInput';
 export { ShowMessageCard } from './ShowMessageCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -19,7 +19,7 @@ interface MentionInputProps {
   onSendMessage?: (message: string) => void;
 }
 
-export const MentionInput: React.FC<MentionInputProps> = ({
+ const MentionInput: React.FC<MentionInputProps> = ({
   users,
   placeholder,
   containerClassName,
@@ -119,3 +119,4 @@ export const MentionInput: React.FC<MentionInputProps> = ({
 };
 
  
+export default MentionInput

package/src/ShowMessageCard.css

@@ -1,40 +1,69 @@
+.message-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px; /* Space between cards */
+}
+
 .message-card {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    padding: 16px;
-    background-color: #fff;
-    transition: box-shadow 0.2s;
-  }
-  
-  .message-card:hover {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  }
-  
-  .message-card-img {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    margin-right: 16px;
-  }
-  
-  .message-card-info {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .message-card-name {
-    font-size: 18px;
-    font-weight: bold;
-  }
-  
-  .message-card-date {
-    font-size: 14px;
-    color: #888;
-  }
-  
-  .message-card-comment {
-    font-size: 16px;
-  }
-  
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #fff;
+  transition: box-shadow 0.2s;
+}
+
+.message-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.message-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px; /* Space between header and body */
+}
+
+.message-card-img,
+.message-card-initials {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007bff;
+  text-transform: uppercase;
+  margin-right: 16px;
+}
+.message-card-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-card-name {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1.2; /* Adjust line height for better spacing */
+}
+
+.message-card-date {
+  margin: 0;
+  font-size: 14px;
+  color: #888;
+  line-height: 1.2; /* Adjust line height for better spacing */
+}
+
+.message-card-body {
+  margin-top: 8px; /* Space between header and comment */
+}
+
+.message-card-comment {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.5; /* Optimal line height for readability */
+}

package/src/ShowMessageCard.tsx

@@ -1,55 +1,150 @@
-import React, { CSSProperties } from 'react';
-import './ShowMessageCard.css'; // Import the CSS file
+import React, { CSSProperties, useState, ReactNode } from 'react';
+import './ShowMessageCard.css';
 
 interface MessageCardProps {
-  id: number;
-  name: string;
-  date: string;
-  comment: string;
-  imgSrc: string;
+  [key: string]: any; // Support dynamic keys
 }
 
 interface ShowMessageCardProps {
   data: MessageCardProps[];
-  cardClassName?: string; // Custom class for card styling
-  cardStyle?: CSSProperties; // Custom inline style for card
-  imgClassName?: string; // Custom class for image styling
-  imgStyle?: CSSProperties; // Custom inline style for image
+  nameKey?: string; // Custom key for name
+  dateKey?: string; // Custom key for date
+  commentKey?: string; // Custom key for comment
+  imgSrcKey?: string; // Custom key for image source
+  containerClassName?: string; // Class for the outermost container
+  containerStyle?: CSSProperties; // Style for the outermost container
+  cardClassName?: string; // Class for the card
+  cardStyle?: CSSProperties; // Style for the card
+  headerClassName?: string; // Class for the card header
+  headerStyle?: CSSProperties; // Style for the card header
+  imgClassName?: string; // Class for the image
+  imgStyle?: CSSProperties; // Style for the image
+  infoClassName?: string; // Class for the user info container
+  infoStyle?: CSSProperties; // Style for the user info container
+  nameClassName?: string; // Class for the user name
+  nameStyle?: CSSProperties; // Style for the user name
+  dateClassName?: string; // Class for the date
+  dateStyle?: CSSProperties; // Style for the date
+  bodyClassName?: string; // Class for the card body
+  bodyStyle?: CSSProperties; // Style for the card body
+  commentClassName?: string; // Class for the comment text
+  commentStyle?: CSSProperties; // Style for the comment text
+  renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
 }
 
 export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   data,
+  nameKey = 'name',
+  dateKey = 'date',
+  commentKey = 'comment',
+  imgSrcKey = 'imgSrc',
+  containerClassName,
+  containerStyle,
   cardClassName,
   cardStyle,
+  headerClassName,
+  headerStyle,
   imgClassName,
-  imgStyle
+  imgStyle,
+  infoClassName,
+  infoStyle,
+  nameClassName,
+  nameStyle,
+  dateClassName,
+  dateStyle,
+  bodyClassName,
+  bodyStyle,
+  commentClassName,
+  commentStyle,
+  renderItem // Custom render function
 }) => {
+  const getInitials = (name: string) => {
+    const nameParts = name.split(' ');
+    const initials = nameParts
+      .map((part) => part[0]?.toUpperCase() || '') // Take the first letter of each part
+      .slice(0, 2) // Limit to 2 letters
+      .join('');
+    return initials;
+  };
+
   return (
-    <div className="message-card-container">
-      {data.map((item) => (
-        <div
-          key={item.id}
-          className={`message-card ${cardClassName || ''}`}
-          style={cardStyle}
-        >
-          <div className="message-card-header">
-            <img
-              src={item.imgSrc || 'default-image.png'}
-              alt={item.name}
-              className={`message-card-img ${imgClassName || ''}`}
-              style={imgStyle}
-            />
-            <div className="message-card-info">
-              <h3 className="message-card-name">{item.name}</h3>
-              <p className="message-card-date">{item.date}</p>
+    <div className={`message-card-container ${containerClassName || ''}`} style={containerStyle}>
+      {data.map((item, index) => {
+        if (renderItem) {
+          // Use custom render function if provided
+          return (
+            <React.Fragment key={item.id || index}>
+              {renderItem(item)}
+            </React.Fragment>
+          );
+        }
+
+        const [showInitials, setShowInitials] = useState(false);
+
+        const handleImageError = () => {
+          setShowInitials(true);
+        };
+
+        return (
+          <div
+            key={item.id || index}
+            className={`message-card ${cardClassName || ''}`}
+            style={cardStyle}
+          >
+            <div
+              className={`message-card-header ${headerClassName || ''}`}
+              style={headerStyle}
+            >
+              {showInitials || !item[imgSrcKey] ? (
+                <div
+                  className={`message-card-initials ${imgClassName || ''}`}
+                  style={imgStyle}
+                >
+                  {getInitials(item[nameKey])}
+                </div>
+              ) : (
+                <img
+                  src={item[imgSrcKey]}
+                  alt={item[nameKey]}
+                  className={`message-card-img ${imgClassName || ''}`}
+                  style={imgStyle}
+                  onError={handleImageError}
+                />
+              )}
+              <div
+                className={`message-card-info ${infoClassName || ''}`}
+                style={infoStyle}
+              >
+                <h3
+                  className={`message-card-name ${nameClassName || ''}`}
+                  style={nameStyle}
+                >
+                  {item[nameKey]}
+                </h3>
+                <p
+                  className={`message-card-date ${dateClassName || ''}`}
+                  style={dateStyle}
+                >
+                  {item[dateKey]}
+                </p>
+              </div>
+            </div>
+            <div
+              className={`message-card-body ${bodyClassName || ''}`}
+              style={bodyStyle}
+            >
+              <p
+                className={`message-card-comment ${commentClassName || ''}`}
+                style={commentStyle}
+              >
+                {item[commentKey]}
+              </p>
             </div>
           </div>
-          <div className="message-card-body">
-            <p className="message-card-comment">{item.comment}</p>
-          </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 };
 
+

package/src/index.ts

@@ -1,2 +1,2 @@
-export {  MentionInput } from './MentionInput';
+export {default as MentionInput}  from './MentionInput';
 export { ShowMessageCard } from './ShowMessageCard';