diff --git a/README.md b/README.md index 7365ed9..b3dea13 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,59 @@ - 📊 Similarity percentage calculation - 🔧 Easy to integrate +## Basic Usage 🚀 + +### Install the Package +First, install the `text-compare` package using **npm or yarn**: + +```bash +npm install text-compare +# or +yarn add text-compare +``` +After installing, here's a quick example to get you started: +```js +import { useTextComparison } from 'text-compare'; + +const TextDiffer = () => { + const text1 = 'The quick brown fox jumps over the lazy dog'; + const text2 = 'The quick blue fox leaps over the happy dog'; + + const { comparisonResult, similarity } = useTextComparison(text1, text2); + + return ( + <> +
{comparisonResult}
+
Similarity: {similarity.toFixed(2)}%
+ + ); +}; +``` + +## 🛠️ Advanced Usage + +### Customization Options + +The `useTextComparison` hook accepts an options object for customization: + +```jsx +const options = { + customColors: { + commonColor: '#1E90FF', // DodgerBlue for common words + removedColor: '#FF6347', // TomatoRed for removed words + addedColor: '#32CD32', // LimeGreen for added words + } +}; + +const { comparisonResult, similarity } = useTextComparison(text1, text2, options); +``` + +### Available Options + +| Option | Type | Description | +|--------|---------|-------------| +| `customColors` | object | An object containing color configurations for text highlighting. Properties: `commonColor` (for matching words), `removedColor` (for removed words), `addedColor` (for added words) | + ## 🚀 Getting Started Guide Follow the steps below to set up and work with the `text-compare` project. @@ -92,53 +145,6 @@ npm run dev npm start ``` -## Basic Usage 🚀 - -Here's a quick example to get you started: - -```js -import { useTextComparison } from 'text-compare'; - -const TextDiffer = () => { - const text1 = 'The quick brown fox jumps over the lazy dog'; - const text2 = 'The quick blue fox leaps over the happy dog'; - - const { comparisonResult, similarity } = useTextComparison(text1, text2); - - return ( - <> -
{comparisonResult}
-
Similarity: {similarity.toFixed(2)}%
- - ); -}; -``` - -## 🛠️ Advanced Usage - -### Customization Options - -The `useTextComparison` hook accepts an options object for customization: - -```jsx -const options = { - customColors: { - commonColor: '#1E90FF', // DodgerBlue for common words - removedColor: '#FF6347', // TomatoRed for removed words - addedColor: '#32CD32', // LimeGreen for added words - } -}; - -const { comparisonResult, similarity } = useTextComparison(text1, text2, options); -``` - -### Available Options - -| Option | Type | Description | -|--------|---------|-------------| -| `customColors` | object | An object containing color configurations for text highlighting. Properties: `commonColor` (for matching words), `removedColor` (for removed words), `addedColor` (for added words) | - - ## Contributing 🤝 Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/CreoWis/text-compare/issues). diff --git a/package.json b/package.json index 8e51377..cb9ef98 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,27 @@ { "name": "text-compare", "version": "0.0.1", + "description": "A tool for comparing text content efficiently.", + "keywords": [ + "text", + "comparison", + "diff", + "react", + "typescript" + ], + "author": { + "name": "CreoWis", + "email": "hello@creowis.com", + "url": "https://www.creowis.com/" + }, + "repository": { + "type": "git", + "url": "https://github.com/CreoWis/text-compare" + }, + "bugs": { + "url": "https://github.com/CreoWis/text-compare/issues" + }, + "license": "MIT", "type": "module", "main": "./dist/index.umd.js", "module": "./dist/index.es.js",