update @shhhplus/react-text-matcher

README.md

@@ -2,7 +2,9 @@
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/shhhplus/react-highlight-words/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@shhhplus/react-highlight-words.svg?style=flat)](https://www.npmjs.com/package/@shhhplus/react-highlight-words) [![codecov](https://img.shields.io/codecov/c/github/shhhplus/react-highlight-words/main?token=4MY5JFP8BX)](https://codecov.io/gh/shhhplus/react-highlight-words) [![build status](https://img.shields.io/github/actions/workflow/status/shhhplus/react-highlight-words/cd.yml)](https://github.com/shhhplus/react-highlight-words/actions)
 
-A component that can highlight words in the text with custom styles. It is a lightweight wrapper based on [react-text-matcher](https://www.npmjs.com/package/@shhhplus/react-text-matcher). If you want more customization capabilities, please use [react-text-matcher](https://www.npmjs.com/package/@shhhplus/react-text-matcher).
+A component that can highlight words in the text with custom styles. It is a lightweight wrapper based on [react-text-matcher](https://www.npmjs.com/package/@shhhplus/react-text-matcher).
+
+If you want more customization capabilities, please use [react-text-matcher](https://www.npmjs.com/package/@shhhplus/react-text-matcher).
 
 ## Install
 
@@ -33,7 +35,10 @@ import Highlightwords from '@shhhplus/react-highlight-words';
 
 const Demo = () => {
   return (
-    <Highlightwords words={['weather', 'nice']} style={{ color: 'green' }}>
+    <Highlightwords
+      words={['weather', new RegExp('nice')]}
+      style={{ color: 'green' }}
+    >
       The weather is nice today.
     </Highlightwords>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-highlight-words",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A component that can highlight words in the text with custom styles.",
   "keywords": [
     "react",
@@ -56,7 +56,7 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@shhhplus/react-text-matcher": "^1.0.0",
+    "@shhhplus/react-text-matcher": "^2.0.1",
     "react": "^18.0.0"
   }
 }

src/index.test.tsx

@@ -78,7 +78,10 @@ describe('HighlightWords', () => {
   test('multi words should works', () => {
     const text = 'AppleTodayFoodHappySunFood';
     const { container } = render(
-      <HighlightWords words={['Food', 'Apple']} style={{ color: 'red' }}>
+      <HighlightWords
+        words={['Food', new RegExp('Apple')]}
+        style={{ color: 'red' }}
+      >
         {text}
       </HighlightWords>,
     );

src/index.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties, FC, useMemo } from 'react';
+import { CSSProperties, FC, Fragment, useMemo } from 'react';
 import TextMatcher from '@shhhplus/react-text-matcher';
 
 type HighlightWordsProps = {
-  words: string | string[];
+  words: string | RegExp | (string | RegExp)[];
   style?: CSSProperties;
   children: string;
 };
@@ -14,24 +14,42 @@ const HighlightWordsInner: FC<HighlightWordsProps> = ({
   style,
   children,
 }) => {
-  const rules = useMemo(() => {
+  const { rules, render } = useMemo(() => {
     const style2use = style || _globalStyle;
-    if (!style2use) {
-      return [];
-    }
+    const render = (word: string) => {
+      return <mark style={style2use}>{word}</mark>;
+    };
 
-    const list = typeof words === 'string' ? [words] : words;
-    return list.map((word) => {
+    if (style2use) {
+      return {
+        rules: words,
+        render,
+      };
+    } else {
       return {
-        pattern: word,
-        render: (word: string) => {
-          return <mark style={style2use}>{word}</mark>;
-        },
+        rules: [],
+        render,
       };
-    });
+    }
   }, [words, style]);
 
-  return <TextMatcher rules={rules}>{children}</TextMatcher>;
+  return (
+    <TextMatcher rules={rules} text={children}>
+      {(nodes) => {
+        return (
+          <Fragment>
+            {nodes.map((node, idx) => {
+              return (
+                <Fragment key={idx}>
+                  {typeof node === 'string' ? node : render(node.text)}
+                </Fragment>
+              );
+            })}
+          </Fragment>
+        );
+      }}
+    </TextMatcher>
+  );
 };
 
 const HighlightWords = HighlightWordsInner as typeof HighlightWordsInner & {