rename

README.md

@@ -1,25 +1,25 @@
-# react-keywords-highlight
+# react-highlight-words
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/shhhplus/react-keywords-highlight/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@shhhplus/react-keywords-highlight.svg?style=flat)](https://www.npmjs.com/package/@shhhplus/react-keywords-highlight) [![codecov](https://img.shields.io/codecov/c/github/shhhplus/react-keywords-highlight/main?token=4MY5JFP8BX)](https://codecov.io/gh/shhhplus/react-keywords-highlight) [![build status](https://img.shields.io/github/actions/workflow/status/shhhplus/react-keywords-highlight/cd.yml)](https://github.com/shhhplus/react-keywords-highlight/actions)
+[![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 matching keywords with customizable styles.
+A component that can highlight matching words with customizable styles.
 
 ## Install
 
 ```sh
-npm install @shhhplus/react-keywords-highlight --save
+npm install @shhhplus/react-highlight-words --save
 ```
 
 ## How to use
 
 ```javascript
-import KeywordsHighlight from '@shhhplus/react-keywords-highlight';
+import Highlightwords from '@shhhplus/react-highlight-words';
 
 const Demo = () => {
   return (
-    <KeywordsHighlight keywords="birthday" style={{ color: 'red' }}>
+    <Highlightwords keywords="birthday" style={{ color: 'red' }}>
       Welcome everyone to come and join my birthday party.
-    </KeywordsHighlight>
+    </Highlightwords>
   );
 };
 ```

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "react-keywords-highlight",
-  "version": "1.0.3",
-  "description": "A component that can highlight matching keywords with customizable styles.",
+  "name": "react-highlight-words",
+  "version": "2.0.0",
+  "description": "A component that can highlight matching words with customizable styles.",
   "keywords": [
     "react",
     "component",
-    "keywords",
-    "highlight"
+    "highlight",
+    "keywords"
   ],
   "main": "./src/index.js",
   "scripts": {
@@ -15,14 +15,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/shhhplus/react-keywords-highlight.git"
+    "url": "https://github.com/shhhplus/react-highlight-words.git"
   },
   "author": "shhhplus",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/shhhplus/react-keywords-highlight/issues"
+    "url": "https://github.com/shhhplus/react-highlight-words/issues"
   },
-  "homepage": "https://github.com/shhhplus/react-keywords-highlight",
+  "homepage": "https://github.com/shhhplus/react-highlight-words",
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",

rollup/rollup.config.ts

@@ -61,7 +61,7 @@ export default {
         ],
       },
       extra: {
-        name: '@shhhplus/react-keywords-highlight',
+        name: '@shhhplus/react-highlight-words',
         main: './index.js',
         types: './types/index.d.ts',
       },

src/index.test.tsx

@@ -1,18 +1,18 @@
 import { render } from '@testing-library/react';
-import KeywordsHighlight from './index';
+import HighlightWords from './index';
 
 test(`component could be updated and unmounted without errors`, () => {
   const text = 'Welcome everyone to come and join my birthday party.';
   const { unmount, rerender } = render(
-    <KeywordsHighlight keywords="birthday" style={{ color: 'greenyellow' }}>
+    <HighlightWords keywords="birthday" style={{ color: 'greenyellow' }}>
       {text}
-    </KeywordsHighlight>,
+    </HighlightWords>,
   );
   expect(() => {
     rerender(
-      <KeywordsHighlight keywords="party" style={{ color: 'red' }}>
+      <HighlightWords keywords="party" style={{ color: 'red' }}>
         {text}
-      </KeywordsHighlight>,
+      </HighlightWords>,
     );
     unmount();
   }).not.toThrow();
@@ -21,9 +21,9 @@ test(`component could be updated and unmounted without errors`, () => {
 test(`a single matched word should works`, () => {
   const text = 'Welcome everyone to come and join my birthday party.';
   const { container } = render(
-    <KeywordsHighlight keywords="birthday" style={{ color: 'red' }}>
+    <HighlightWords keywords="birthday" style={{ color: 'red' }}>
       {text}
-    </KeywordsHighlight>,
+    </HighlightWords>,
   );
 
   expect(container.innerHTML).toEqual(
@@ -35,9 +35,9 @@ test(`multiple matched words should works`, () => {
   const text =
     'hi, party time. Welcome everyone to come and join my birthday party.';
   const { container } = render(
-    <KeywordsHighlight keywords="party" style={{ color: 'red' }}>
+    <HighlightWords keywords="party" style={{ color: 'red' }}>
       {text}
-    </KeywordsHighlight>,
+    </HighlightWords>,
   );
 
   expect(container.innerHTML).toEqual(
@@ -48,25 +48,25 @@ test(`multiple matched words should works`, () => {
 test('empty keywords should works', () => {
   const text = 'Welcome everyone to come and join my birthday party.';
   const { container } = render(
-    <KeywordsHighlight keywords="" style={{ color: 'red' }}>
+    <HighlightWords keywords="" style={{ color: 'red' }}>
       {text}
-    </KeywordsHighlight>,
+    </HighlightWords>,
   );
 
   expect(container.innerHTML).toEqual(text);
 });
 
 test(`component should update when props changes`, () => {
   const { container, rerender } = render(
-    <KeywordsHighlight keywords="nothing" style={{ color: 'green' }}>
+    <HighlightWords keywords="nothing" style={{ color: 'green' }}>
       hello, everyone.
-    </KeywordsHighlight>,
+    </HighlightWords>,
   );
 
   rerender(
-    <KeywordsHighlight keywords="birthday" style={{ color: 'red' }}>
+    <HighlightWords keywords="birthday" style={{ color: 'red' }}>
       Welcome everyone to come and join my birthday party.
-    </KeywordsHighlight>,
+    </HighlightWords>,
   );
 
   expect(container.innerHTML).toEqual(