Added color highlighter

README.md

@@ -1,6 +1,6 @@
 # react-diff-component
 
-Highlights differences between two strings, uses the [diff](https://www.npmjs.com/package/diff) module based on (https://github.com/cezary/react-diff)
+Highlights differences between two strings, uses the [diff](https://www.npmjs.com/package/diff) module based on (https://github.com/Lefortov/react-diff)
 
 ## Installation
 
@@ -24,4 +24,4 @@ const Component = () => (
 
 ## License
 
-MIT
+MIT

package.json

@@ -34,11 +34,11 @@
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.3"
   },
-  "author": "Lefortov",
-  "homepage": "https://github.com/Lefortov/react-diff",
+  "author": "Kunal",
+  "homepage": "https://github.com/kunalvashist/react-diff.git",
   "repository": {
     "type": "git",
-    "url": "git@github.com:Lefortov/react-diff.git"
+    "url": "git@github.com:kunalvashist/react-diff.git"
   },
   "dependencies": {
     "diff": "^3.5.0"

src/lib/index.jsx

@@ -71,15 +71,21 @@ const getUntouchedRow = (value) => {
     </Fragment>
 };
 
-const Diff = ({ inputA, inputB, type, options }) => {
+const Diff = ({ inputA, inputB, type, highlight, options }) => {
     index = 0;
     const diff = fnMap[type](inputA, inputB, options);
-    const result = diff.map((part) => {
+    const result = diff.map((part, index) => {
+      if(highlight){ 
+        var className = part.added ? 'lightgreen' : part.removed ? 'salmon' : 'lightgrey';
+        return React.createElement('span', { key: index, className: className }, part.value);
+       } 
+       else{
         return part.added ?
             getAddedRow(part.value) :
             part.removed ?
                 getRemovedRow(part.value) :
                 getUntouchedRow(part.value);
+                }
     });
     return (
         <pre className='diff-result'>
@@ -91,7 +97,8 @@ const Diff = ({ inputA, inputB, type, options }) => {
 Diff.defaultProps = {
     inputA: '',
     inputB: '',
-    type: 'chars'
+    type: 'chars',
+    highlight: true
 };
 
 Diff.types = types;