react-mention-input 1.0.0 → 1.0.1

package/dist/MentionInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface User {
+    id: number;
+    name: string;
+}
+interface MentionInputProps {
+    users: User[];
+    placeholder?: string;
+}
+declare const MentionInput: React.FC<MentionInputProps>;
+export default MentionInput;

package/dist/MentionInput.js

@@ -1 +1,50 @@
-"use strict";
+import React, { useState } from 'react';
+var MentionInput = function (_a) {
+    var users = _a.users, placeholder = _a.placeholder;
+    var _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
+    var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
+    var _d = useState(false), showSuggestions = _d[0], setShowSuggestions = _d[1];
+    var handleInputChange = function (e) {
+        var value = e.target.value;
+        setInputValue(value);
+        var mentionMatch = value.match(/@(\w*)$/);
+        if (mentionMatch) {
+            var query_1 = mentionMatch[1].toLowerCase();
+            var filteredUsers = users.filter(function (user) {
+                return user.name.toLowerCase().startsWith(query_1);
+            });
+            setSuggestions(filteredUsers);
+            setShowSuggestions(true);
+        }
+        else {
+            setShowSuggestions(false);
+        }
+    };
+    var handleSuggestionClick = function (user) {
+        var mentionIndex = inputValue.lastIndexOf('@');
+        var newValue = "".concat(inputValue.substring(0, mentionIndex + 1)).concat(user.name, " ");
+        setInputValue(newValue);
+        setShowSuggestions(false);
+    };
+    return (React.createElement("div", { style: { position: 'relative' } },
+        React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: placeholder || 'Type a message...', style: { width: '100%', padding: '10px' } }),
+        showSuggestions && (React.createElement("ul", { style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                backgroundColor: '#fff',
+                border: '1px solid #ddd',
+                listStyle: 'none',
+                margin: 0,
+                padding: 0,
+                maxHeight: '150px',
+                overflowY: 'auto',
+                zIndex: 1,
+            } }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, style: {
+                padding: '8px',
+                cursor: 'pointer',
+                borderBottom: '1px solid #ddd',
+            } }, user.name)); })))));
+};
+export default MentionInput;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-mention-input",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-     "build": "tsc"
+    "build": "tsc"
   },
   "keywords": [],
   "author": "",
@@ -15,8 +15,10 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "csstype": "^3.1.3",
     "typescript": "^5.6.3"
   }
 }

package/src/MentionInput.tsx

@@ -0,0 +1,87 @@
+import React, { useState, ChangeEvent, KeyboardEvent } from 'react';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+interface MentionInputProps {
+  users: User[];
+  placeholder?: string;
+}
+
+const MentionInput: React.FC<MentionInputProps> = ({ users, placeholder }) => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [suggestions, setSuggestions] = useState<User[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+
+    const mentionMatch = value.match(/@(\w*)$/);
+    if (mentionMatch) {
+      const query = mentionMatch[1].toLowerCase();
+      const filteredUsers = users.filter((user) =>
+        user.name.toLowerCase().startsWith(query)
+      );
+      setSuggestions(filteredUsers);
+      setShowSuggestions(true);
+    } else {
+      setShowSuggestions(false);
+    }
+  };
+
+  const handleSuggestionClick = (user: User) => {
+    const mentionIndex = inputValue.lastIndexOf('@');
+    const newValue = `${inputValue.substring(0, mentionIndex + 1)}${user.name} `;
+    setInputValue(newValue);
+    setShowSuggestions(false);
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder={placeholder || 'Type a message...'}
+        style={{ width: '100%', padding: '10px' }}
+      />
+      {showSuggestions && (
+        <ul
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            backgroundColor: '#fff',
+            border: '1px solid #ddd',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+            maxHeight: '150px',
+            overflowY: 'auto',
+            zIndex: 1,
+          }}
+        >
+          {suggestions.map((user) => (
+            <li
+              key={user.id}
+              onClick={() => handleSuggestionClick(user)}
+              style={{
+                padding: '8px',
+                cursor: 'pointer',
+                borderBottom: '1px solid #ddd',
+              }}
+            >
+              {user.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default MentionInput;

package/tsconfig.json

@@ -2,11 +2,13 @@
   "compilerOptions": {
     "target": "ES5",
     "module": "ESNext",
+    "moduleResolution": "node",
     "jsx": "react",
+    "lib": ["dom", "es6"],  // Ensure karein ki 'es6' included ho
     "declaration": true,
     "outDir": "./dist",
     "strict": true,
     "esModuleInterop": true
-  },
-  "include": ["src/**/*"]
+  }
+ 
 }