diff --git a/README.md b/README.md
index bdfc18d..403643d 100644
--- a/README.md
+++ b/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 (
-
+
Welcome everyone to come and join my birthday party.
-
+
);
};
```
diff --git a/package-lock.json b/package-lock.json
index 3401c14..43a8131 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
- "name": "react-keywords-highlight",
- "version": "1.0.3",
+ "name": "react-highlight-words",
+ "version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "react-keywords-highlight",
- "version": "1.0.3",
+ "name": "react-highlight-words",
+ "version": "2.0.0",
"license": "MIT",
"dependencies": {
"react": "^18.0.0"
diff --git a/package.json b/package.json
index 8b2be48..db82c5d 100644
--- a/package.json
+++ b/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",
diff --git a/rollup/rollup.config.ts b/rollup/rollup.config.ts
index f92ff6b..956da0b 100644
--- a/rollup/rollup.config.ts
+++ b/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',
},
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 20efd32..8000ce6 100644
--- a/src/index.test.tsx
+++ b/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(
-
+
{text}
- ,
+ ,
);
expect(() => {
rerender(
-
+
{text}
- ,
+ ,
);
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(
-
+
{text}
- ,
+ ,
);
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(
-
+
{text}
- ,
+ ,
);
expect(container.innerHTML).toEqual(
@@ -48,9 +48,9 @@ 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(
-
+
{text}
- ,
+ ,
);
expect(container.innerHTML).toEqual(text);
@@ -58,15 +58,15 @@ test('empty keywords should works', () => {
test(`component should update when props changes`, () => {
const { container, rerender } = render(
-
+
hello, everyone.
- ,
+ ,
);
rerender(
-
+
Welcome everyone to come and join my birthday party.
- ,
+ ,
);
expect(container.innerHTML).toEqual(