├── .gitignore
├── .npmignore
├── README.md
├── dist
    └── react-diff.js
├── lib
    └── react-diff.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | *.iml
3 | node_modules/


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | **/.*
2 | example
3 | script
4 | specs
5 | bower.json
6 | karma.conf.js
7 | webpack.config.js
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-diff
 2 | 
 3 | Highlights differences between two strings, uses the [diff](https://www.npmjs.com/package/diff) module
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | npm install react-diff
 9 | ```
10 | 
11 | ## Demo
12 | 
13 | http://cezary.github.io/react-diff/
14 | 
15 | ## Example
16 | 
17 | ```javascript
18 | var React = require('react');
19 | var Diff = require('react-diff');
20 | 
21 | var Component = React.createClass({
22 |   render: function() {
23 |     return (
24 |       <Diff inputA="gogol" inputB="google" type="chars" />
25 |     );
26 |   }
27 | });
28 | ```
29 | 
30 | ## License
31 | 
32 | MIT
33 | 


--------------------------------------------------------------------------------
/dist/react-diff.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var React = require('react');
 4 | var jsdiff = require('diff');
 5 | 
 6 | var fnMap = {
 7 |   'chars': jsdiff.diffChars,
 8 |   'words': jsdiff.diffWords,
 9 |   'sentences': jsdiff.diffSentences,
10 |   'json': jsdiff.diffJson
11 | };
12 | 
13 | module.exports = React.createClass({
14 |   displayName: 'Diff',
15 | 
16 |   getDefaultProps: function getDefaultProps() {
17 |     return {
18 |       inputA: '',
19 |       inputB: '',
20 |       type: 'chars'
21 |     };
22 |   },
23 | 
24 |   propTypes: {
25 |     inputA: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
26 |     inputB: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
27 |     type: React.PropTypes.oneOf(['chars', 'words', 'sentences', 'json'])
28 |   },
29 | 
30 |   render: function render() {
31 |     var diff = fnMap[this.props.type](this.props.inputA, this.props.inputB);
32 |     var result = diff.map(function (part, index) {
33 |       var spanStyle = {
34 |         backgroundColor: part.added ? 'lightgreen' : part.removed ? 'salmon' : 'lightgrey'
35 |       };
36 |       return React.createElement(
37 |         'span',
38 |         { key: index, style: spanStyle },
39 |         part.value
40 |       );
41 |     });
42 |     return React.createElement(
43 |       'pre',
44 |       { className: 'diff-result' },
45 |       result
46 |     );
47 |   }
48 | });
49 | 
50 | 


--------------------------------------------------------------------------------
/lib/react-diff.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var jsdiff = require('diff');
 3 | 
 4 | var fnMap = {
 5 |   'chars': jsdiff.diffChars,
 6 |   'words': jsdiff.diffWords,
 7 |   'sentences': jsdiff.diffSentences,
 8 |   'json': jsdiff.diffJson
 9 | };
10 | 
11 | module.exports = React.createClass({
12 |   displayName: 'Diff',
13 | 
14 |   getDefaultProps: function() {
15 |     return {
16 |       inputA: '',
17 |       inputB: '',
18 |       type: 'chars'
19 |     };
20 |   },
21 | 
22 |   propTypes: {
23 |     inputA: React.PropTypes.oneOfType([
24 |       React.PropTypes.string,
25 |       React.PropTypes.object
26 |     ]),
27 |     inputB: React.PropTypes.oneOfType([
28 |       React.PropTypes.string,
29 |       React.PropTypes.object
30 |     ]),
31 |     type: React.PropTypes.oneOf([
32 |       'chars',
33 |       'words',
34 |       'sentences',
35 |       'json'
36 |     ])
37 |   },
38 | 
39 |   render: function () {
40 |     var diff = fnMap[this.props.type](this.props.inputA, this.props.inputB);
41 |     var result = diff.map(function(part, index) {
42 |       var spanStyle = {
43 |         backgroundColor: part.added ? 'lightgreen' : part.removed ? 'salmon' : 'lightgrey'
44 |       };
45 |       return <span key={index} style={spanStyle}>{part.value}</span>
46 |     });
47 |     return (
48 |       <pre className='diff-result'>
49 |         {result}
50 |       </pre>
51 |     );
52 |   },
53 | });
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-diff",
 3 |   "version": "0.0.7",
 4 |   "description": "Highlight differences between inputs",
 5 |   "main": "dist/react-diff.js",
 6 |   "scripts": {
 7 |     "build": "./node_modules/.bin/babel lib/react-diff.js > dist/react-diff.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/cezary/react-diff.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "diff"
16 |   ],
17 |   "author": "Cezary Wojtkowski <cezary@gmail.com>",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/cezary/react-diff/issues"
21 |   },
22 |   "homepage": "https://github.com/cezary/react-diff",
23 |   "peerDependencies": {
24 |     "react": ">=0.12.0"
25 |   },
26 |   "dependencies": {
27 |     "diff": "^1.2.0"
28 |   },
29 |   "devDependencies": {
30 |     "babel": "^5.1.10"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------