From c5328722e0b5a3b3883715b2e561f502806ca4d5 Mon Sep 17 00:00:00 2001 From: shhhplus Date: Sun, 21 May 2023 19:39:27 +0800 Subject: [PATCH] update @shhhplus/react-text-matcher --- README.md | 9 +++++++-- package-lock.json | 18 ++++++++++++------ package.json | 4 ++-- src/index.test.tsx | 5 ++++- src/index.tsx | 46 ++++++++++++++++++++++++++++++++-------------- 5 files changed, 57 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index cb8c66b..fffe572 100644 --- a/README.md +++ b/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 ( - + The weather is nice today. ); diff --git a/package-lock.json b/package-lock.json index c74dfeb..1b350d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "react-highlight-words", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-highlight-words", - "version": "3.0.0", + "version": "3.0.1", "license": "MIT", "dependencies": { - "@shhhplus/react-text-matcher": "^1.0.0", + "@shhhplus/react-text-matcher": "^2.0.1", "react": "^18.0.0" }, "devDependencies": { @@ -2911,13 +2911,19 @@ } }, "node_modules/@shhhplus/react-text-matcher": { - "version": "1.0.0", - "resolved": "https://registry.npmmirror.com/@shhhplus/react-text-matcher/-/react-text-matcher-1.0.0.tgz", - "integrity": "sha512-I5r7Jm8zAOQOjbmOzr/uGKA2ofMfot9zFkteUr3Aj6bYS8lo0yBi/UaQwpCheSYbL0rAMSAIowGbg1KHBEWq6g==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@shhhplus/react-text-matcher/-/react-text-matcher-2.0.1.tgz", + "integrity": "sha512-6pgibpLEV7JzRCCQdBw2sMoMDNuoeZfQ1RmUQy+MxZxByY2ov8se67Mjh2u0DvtS655SlFdzTjhYYnszo4RSrg==", "dependencies": { + "@shhhplus/text-matcher": "^1.0.3", "react": "^18.0.0" } }, + "node_modules/@shhhplus/text-matcher": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@shhhplus/text-matcher/-/text-matcher-1.0.3.tgz", + "integrity": "sha512-b0QjrF9Q8M1NRe+N9FSzD+wslBVpc/2SthJkO+JDnTGGz/z9tHhFPck1VsppK0dx/XV8pdPfLuqHhOkrd+5s6A==" + }, "node_modules/@sinclair/typebox": { "version": "0.25.24", "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.25.24.tgz", diff --git a/package.json b/package.json index 515edba..af1b2f5 100644 --- a/package.json +++ b/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" } } diff --git a/src/index.test.tsx b/src/index.test.tsx index 23a0451..17a3ddb 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -78,7 +78,10 @@ describe('HighlightWords', () => { test('multi words should works', () => { const text = 'AppleTodayFoodHappySunFood'; const { container } = render( - + {text} , ); diff --git a/src/index.tsx b/src/index.tsx index e4e9c51..acbb21a 100644 --- a/src/index.tsx +++ b/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 = ({ style, children, }) => { - const rules = useMemo(() => { + const { rules, render } = useMemo(() => { const style2use = style || _globalStyle; - if (!style2use) { - return []; - } + const render = (word: string) => { + return {word}; + }; - 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 {word}; - }, + rules: [], + render, }; - }); + } }, [words, style]); - return {children}; + return ( + + {(nodes) => { + return ( + + {nodes.map((node, idx) => { + return ( + + {typeof node === 'string' ? node : render(node.text)} + + ); + })} + + ); + }} + + ); }; const HighlightWords = HighlightWordsInner as typeof HighlightWordsInner & {