react-mention-input 1.0.10 → 1.0.12

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' },
@@ -97,7 +97,7 @@ interface MessageCardProps {
 
 ```tsx
 import React from 'react';
-import ShowMessageCard from 'react-mention-input';
+import {ShowMessageCard} from 'react-mention-input';
 
 const messageData = [
   {
@@ -130,52 +130,5 @@ function App() {
 
 export default App;
 ```
-
-## Package Configuration
-
-Ensure that your `package.json` has the following structure:
-
-```json
-{
-  "name": "react-mention-input",
-  "version": "1.0.9",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "test": "echo "Error: no test specified" && exit 1",
-    "build": "tsc && npm run copy-css",
-    "copy-css": "copyfiles -u 1 src/**/*.css dist"
-  },
-  "keywords": [
-    "mention",
-    "input",
-    "autocomplete",
-    "user suggestions",
-    "react",
-    "typescript"
-  ],
-  "author": "Your Name",
-  "license": "ISC",
-  "description": "A React component for input with @mention functionality.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/yourusername/react-mention-input.git"
-  },
-  "devDependencies": {
-    "@types/node": "^22.9.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "copyfiles": "^2.4.1",
-    "csstype": "^3.1.3",
-    "sass": "^1.81.0",
-    "typescript": "^5.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
-  }
-}
-```
-
 ### 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;
 }
-declare const MentionInput: React.FC<MentionInputProps>;
-export default MentionInput;
+export declare const MentionInput: React.FC<MentionInputProps>;
+export {};

package/dist/MentionInput.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './MentionInput.css'; // Import the SCSS file
-var MentionInput = function (_a) {
+export 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,4 +45,3 @@ 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.d.ts

@@ -14,5 +14,5 @@ interface ShowMessageCardProps {
     imgClassName?: string;
     imgStyle?: CSSProperties;
 }
-declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
-export default ShowMessageCard;
+export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
+export {};

package/dist/ShowMessageCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './ShowMessageCard.css'; // Import the CSS file
-var ShowMessageCard = function (_a) {
+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" },
@@ -11,4 +11,3 @@ var ShowMessageCard = function (_a) {
         React.createElement("div", { className: "message-card-body" },
             React.createElement("p", { className: "message-card-comment" }, item.comment)))); })));
 };
-export default ShowMessageCard;

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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

package/src/MentionInput.tsx

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

package/src/ShowMessageCard.tsx

@@ -17,7 +17,7 @@ interface ShowMessageCardProps {
   imgStyle?: CSSProperties; // Custom inline style for image
 }
 
-const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
+export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   data,
   cardClassName,
   cardStyle,
@@ -53,4 +53,3 @@ const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   );
 };
 
-export default ShowMessageCard;

package/src/index.ts

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