react-highlight-me 1.1.1 → 1.2.0

package/dist/cjs/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    children?: React.ReactElement | string | null;
+    words?: string[] | string | RegExp | RegExp[];
+    highlightStyle?: React.CSSProperties;
+    caseSensitive?: boolean;
+    isEscapePattern?: boolean;
+    isWordBoundary?: boolean;
+};
+declare const TextHighlighter: ({ children, words, highlightStyle, caseSensitive, isEscapePattern, isWordBoundary, }: Props) => unknown;
+export default TextHighlighter;

package/dist/cjs/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var TextHighlighter = function (_a) {
+    var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.words, words = _c === void 0 ? [] : _c, _d = _a.highlightStyle, highlightStyle = _d === void 0 ? { backgroundColor: 'yellow', fontWeight: 'bold' } : _d, _e = _a.caseSensitive, caseSensitive = _e === void 0 ? false : _e, _f = _a.isEscapePattern, isEscapePattern = _f === void 0 ? true : _f, _g = _a.isWordBoundary, isWordBoundary = _g === void 0 ? true : _g;
+    // Convert words to array if it's a string
+    var wordsArray = Array.isArray(words) ? words : [words];
+    // If no words to highlight, return original content
+    if (!wordsArray.length || wordsArray.every(function (word) { return !word; })) {
+        return children;
+    }
+    // Function to escape regex special characters
+    var escapeRegex = function (term) {
+        if (term instanceof RegExp) {
+            return term.source;
+        }
+        if (isEscapePattern) {
+            term = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        }
+        if (isWordBoundary) {
+            term = "\\b".concat(term, "\\b");
+        }
+        return term;
+    };
+    // Create a regex pattern for all words
+    var pattern = wordsArray
+        .filter(function (word) { return word; })
+        .map(function (word) { return escapeRegex(word); })
+        .join('|');
+    if (!pattern) {
+        return children;
+    }
+    var regex = new RegExp("(".concat(pattern, ")"), caseSensitive ? 'g' : 'gi');
+    // Function to highlight text content
+    var highlightText = function (textContent) {
+        if (!textContent || typeof textContent !== 'string') {
+            return textContent;
+        }
+        var parts = textContent.split(regex);
+        return parts.map(function (part, index) {
+            var shouldHighlight = wordsArray.some(function (word) {
+                if (word instanceof RegExp) {
+                    return word.test(part);
+                }
+                return caseSensitive
+                    ? part === word.trim()
+                    : part.toLowerCase() === word.trim().toLowerCase();
+            });
+            return shouldHighlight ? (react_1.default.createElement("mark", { key: index, style: highlightStyle }, part)) : (part);
+        });
+    };
+    // Function to recursively process React elements
+    var processElement = function (element) {
+        if (typeof element === 'string') {
+            return highlightText(element);
+        }
+        if (typeof element === 'number') {
+            return element;
+        }
+        if (!react_1.default.isValidElement(element)) {
+            return element;
+        }
+        // Clone element and process its children
+        var processedChildren = react_1.default.Children.map(element.props.children, function (child) {
+            if (typeof child === 'string') {
+                return highlightText(child);
+            }
+            return processElement(child);
+        });
+        return react_1.default.cloneElement(element, {}, processedChildren);
+    };
+    return processElement(children);
+};
+exports.default = TextHighlighter;

package/dist/esm/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    children?: React.ReactElement | string | null;
+    words?: string[] | string | RegExp | RegExp[];
+    highlightStyle?: React.CSSProperties;
+    caseSensitive?: boolean;
+    isEscapePattern?: boolean;
+    isWordBoundary?: boolean;
+};
+declare const TextHighlighter: ({ children, words, highlightStyle, caseSensitive, isEscapePattern, isWordBoundary, }: Props) => unknown;
+export default TextHighlighter;

package/dist/esm/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+var TextHighlighter = function (_a) {
+    var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.words, words = _c === void 0 ? [] : _c, _d = _a.highlightStyle, highlightStyle = _d === void 0 ? { backgroundColor: 'yellow', fontWeight: 'bold' } : _d, _e = _a.caseSensitive, caseSensitive = _e === void 0 ? false : _e, _f = _a.isEscapePattern, isEscapePattern = _f === void 0 ? true : _f, _g = _a.isWordBoundary, isWordBoundary = _g === void 0 ? true : _g;
+    // Convert words to array if it's a string
+    var wordsArray = Array.isArray(words) ? words : [words];
+    // If no words to highlight, return original content
+    if (!wordsArray.length || wordsArray.every(function (word) { return !word; })) {
+        return children;
+    }
+    // Function to escape regex special characters
+    var escapeRegex = function (term) {
+        if (term instanceof RegExp) {
+            return term.source;
+        }
+        if (isEscapePattern) {
+            term = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        }
+        if (isWordBoundary) {
+            term = "\\b".concat(term, "\\b");
+        }
+        return term;
+    };
+    // Create a regex pattern for all words
+    var pattern = wordsArray
+        .filter(function (word) { return word; })
+        .map(function (word) { return escapeRegex(word); })
+        .join('|');
+    if (!pattern) {
+        return children;
+    }
+    var regex = new RegExp("(".concat(pattern, ")"), caseSensitive ? 'g' : 'gi');
+    // Function to highlight text content
+    var highlightText = function (textContent) {
+        if (!textContent || typeof textContent !== 'string') {
+            return textContent;
+        }
+        var parts = textContent.split(regex);
+        return parts.map(function (part, index) {
+            var shouldHighlight = wordsArray.some(function (word) {
+                if (word instanceof RegExp) {
+                    return word.test(part);
+                }
+                return caseSensitive
+                    ? part === word.trim()
+                    : part.toLowerCase() === word.trim().toLowerCase();
+            });
+            return shouldHighlight ? (React.createElement("mark", { key: index, style: highlightStyle }, part)) : (part);
+        });
+    };
+    // Function to recursively process React elements
+    var processElement = function (element) {
+        if (typeof element === 'string') {
+            return highlightText(element);
+        }
+        if (typeof element === 'number') {
+            return element;
+        }
+        if (!React.isValidElement(element)) {
+            return element;
+        }
+        // Clone element and process its children
+        var processedChildren = React.Children.map(element.props.children, function (child) {
+            if (typeof child === 'string') {
+                return highlightText(child);
+            }
+            return processElement(child);
+        });
+        return React.cloneElement(element, {}, processedChildren);
+    };
+    return processElement(children);
+};
+export default TextHighlighter;

package/package.json

@@ -1,13 +1,32 @@
 {
   "name": "react-highlight-me",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Highlight words in React components or text",
-  "main": "highlight.tsx",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [],
   "author": "Andrey Hohutkin <Andrey.Hohutkin@gmail.com",
   "license": "ISC",
-  "packageManager": "pnpm@10.9.0"
+  "packageManager": "pnpm@10.9.0",
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "typescript": "^5.3.3"
+  }
 }

package/highlight.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-
-type Props = {
-  children?: React.ReactElement | null | string;
-  words?: string[] | string | RegExp | RegExp[];
-  highlightStyle?: React.CSSProperties;
-  caseSensitive?: boolean;
-  isEscapePattern?: boolean;
-  isWordBoundary?: boolean;
-}
-
-const TextHighlighter = ({ 
-  children = '',
-  words = [], 
-  highlightStyle = { backgroundColor: 'yellow', fontWeight: 'bold' },
-  caseSensitive = false,
-  isEscapePattern = true,
-  isWordBoundary = true,
-}: Props) => {
-  // Convert words to array if it's a string
-  const wordsArray = Array.isArray(words) ? words : [words];
-  
-  // If no words to highlight, return original content
-  if (!wordsArray.length || wordsArray.every(word => !word)) {
-    return children;
-  }
-
-  // Function to escape regex special characters
-  const escapeRegex = (term: string | RegExp) => {
-    if (term instanceof RegExp) {
-      return term.source
-    }
-
-    if (isEscapePattern) {
-      term = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    }
-
-    if (isWordBoundary) {
-      term = `\\b${term}\\b`;
-    }
-
-    return term
-  };
-
-  // Create a regex pattern for all words
-  const pattern = wordsArray
-    .filter(word => word)
-    .map(word => escapeRegex(word))
-    .join('|');
-  
-  if (!pattern) {
-    return children;
-  }
-
-  const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi');
-
-  // Function to highlight text content
-  const highlightText = (textContent) => {
-    if (!textContent || typeof textContent !== 'string') {
-      return textContent;
-    }
-
-    const parts = textContent.split(regex);
-
-    return parts.map((part, index) => {
-      const shouldHighlight = wordsArray.some(word => {
-        if (word instanceof RegExp) {
-          return word.test(part);
-        }
-        return caseSensitive
-          ? part === word.trim()
-          : part.toLowerCase() === word.trim().toLowerCase();
-      });
-
-      return shouldHighlight ? (
-        <mark key={index} style={highlightStyle}>
-          {part}
-        </mark>
-      ) : (
-        part
-      );
-    });
-  };
-
-  // Function to recursively process React elements
-  const processElement = (element) => {
-    if (typeof element === 'string') {
-      return highlightText(element);
-    }
-    
-    if (typeof element === 'number') {
-      return element;
-    }
-
-    if (!React.isValidElement(element)) {
-      return element;
-    }
-
-    // Clone element and process its children
-    const processedChildren = React.Children.map(element.props.children, (child) => {
-      if (typeof child === 'string') {
-        return highlightText(child);
-      }
-      return processElement(child);
-    });
-
-    return React.cloneElement(element, {}, processedChildren);
-  };
-
-  return processElement(children);
-};
-
-export default TextHighlighter;