feat: Update useTextComparison hook and README for enhanced customiza…

…tion options
CreoWis · Oct 4, 2024 · 019daaa · 019daaa
1 parent ad6ca06
commit 019daaa
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -31,14 +31,16 @@ const TextDiffer = () => {
     addedColor: '#32CD32',     // LimeGreen for added words
   };
 
-  // Pass custom colors to the hook
-  const { comparisonResult, similarity } = useTextComparison(text1, text2, customColors);
+  // Pass custom colors when using the hook
+  const { comparisonResult, similarity } = useTextComparison(text1, text2, {
+    customColors,
+  });
 
   return (
-    <div>
-      <div className='comparison'>{comparisonResult}</div>
+    <>
+      <div className='flex gap-1 mb-4'>{comparisonResult}</div>
       <div>Similarity: {similarity.toFixed(2)}%</div>
-    </div>
+    </>
   );
 };
 

diff --git a/lib/hooks/useTextComparison.tsx b/lib/hooks/useTextComparison.tsx
@@ -4,15 +4,23 @@ interface ComparisonColors {
   addedColor?: string;
 }
 
+interface ComparisonOptions {
+  customColors?: ComparisonColors;
+}
+
 export const useTextComparison = (
-  text1: string = '', 
+  text1: string = '',
   text2: string = '',
-  {
-    commonColor = 'gray',
-    removedColor = 'red',
-    addedColor = 'green',
-  }: ComparisonColors = {}
+  options: ComparisonOptions = {}
 ) => {
+  const {
+    customColors = {
+      commonColor: 'gray',
+      removedColor: 'red',
+      addedColor: 'green',
+    },
+  } = options;
+
   const compareTexts = (t1: string, t2: string) => {
     // Check for undefined or null values and handle them
     if (!t1 || !t2) {
@@ -38,18 +46,18 @@ export const useTextComparison = (
       if (word1 === word2) {
         // Words are the same, mark them as common (custom or default color)
         result.push(
-          <span key={`common-${i}`} style={{ color: commonColor }}>
-            {word1}
-          </span>
-        );
+            <span key={`common-${i}`} style={{ color: customColors.commonColor }}>
+              {word1}
+            </span>
+          );
         matches++; // Count this as a match for similarity
         i++;
         j++;
       } else {
         // Word in text1 is not in text2, mark as removed (custom or default color)
         if (i < words1.length) {
           result.push(
-            <span key={`removed-${i}`} style={{ color: removedColor }}>
+            <span key={`removed-${i}`} style={{ color: customColors.removedColor }}>
               {word1}
             </span>
           );
@@ -59,15 +67,15 @@ export const useTextComparison = (
         // Word in text2 is not in text1, mark as added (custom or default color)
         if (j < words2.length) {
           result.push(
-            <span key={`added-${j}`} style={{ color: addedColor }}>
+            <span key={`added-${j}`} style={{ color: customColors.addedColor }}>
               {word2}
             </span>
           );
           j++;
         }
       }
     }
-
+    
     // Return comparison result as well as similarity percentage
     const totalWords = Math.max(words1.length, words2.length);
     const similarity = (matches / totalWords) * 100; // Similarity percentage