A simple and beautiful text diff viewer component made with Diff and React.

Inspired from Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.

Check here for v2.0

Install

1yarn add react-diff-viewer
2
3# or
4
5npm i react-diff-viewer

Usage

1import React, { PureComponent } from 'react';
2import ReactDiffViewer from 'react-diff-viewer';
3
4const oldCode = `
5const a = 10
6const b = 10
7const c = () => console.log('foo')
8
9if(a > 10) {
10  console.log('bar')
11}
12
13console.log('done')
14`;
15const newCode = `
16const a = 10
17const boo = 10
18
19if(a === 10) {
20  console.log('bar')
21}
22`;
23
24class Diff extends PureComponent {
25  render = () => {
26    return (
27      <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
28    );
29  };
30}

Props

Prop	Type	Default	Description
oldValue	string	''	Old value as string.
newValue	string	''	New value as string.
splitView	boolean	true	Switch between unified and split view.
disableWordDiff	boolean	false	Show and hide word diff in a diff line.
compareMethod	DiffMethod	DiffMethod.CHARS	JsDiff text diff method used for diffing strings. Check out the guide to use different methods.
hideLineNumbers	boolean	false	Show and hide line numbers.
renderContent	function	undefined	Render Prop API to render code in the diff viewer. Helpful for syntax highlighting
onLineNumberClick	function	undefined	Event handler for line number click. (lineId: string) => void
highlightLines	array[string]	[]	List of lines to be highlighted. Works together with onLineNumberClick. Line number are prefixed with L and R for the left and right section of the diff viewer, respectively. For example, L-20 means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, [L-2, L-3, L-4, L-5] will highlight the lines 2-5 in the left pane.
showDiffOnly	boolean	true	Shows only the diffed lines and folds the unchanged lines
extraLinesSurroundingDiff	number	3	Number of extra unchanged lines surrounding the diff. Works along with showDiffOnly.
codeFoldMessageRenderer	function	Expand {number} of lines ...	Render Prop API to render code fold message.
styles	object	{}	To override style variables and styles. Learn more about overriding styles
useDarkTheme	boolean	true	To enable/disable dark theme.
leftTitle	string	undefined	Column title for left section of the diff in split view. This will be used as the only title in inline view.
rightTitle	string	undefined	Column title for right section of the diff in split view. This will be ignored in inline view.
linesOffset	number	0	Number to start count code lines from.

Instance Methods

resetCodeBlocks() - Resets the expanded code blocks to it's initial state. Return true on successful reset and false during unsuccessful reset.

Syntax Highlighting

Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use renderContent(content: string) => JSX.Element and your favorite syntax highlighting library to achieve this.

An example using Prism JS

1// Load Prism CSS
2<link
3  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"
4/>
5
6// Load Prism JS
7<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>

1import React, { PureComponent } from 'react';
2import ReactDiffViewer from 'react-diff-viewer';
3
4const oldCode = `
5const a = 10
6const b = 10
7const c = () => console.log('foo')
8
9if(a > 10) {
10  console.log('bar')
11}
12
13console.log('done')
14`;
15const newCode = `
16const a = 10
17const boo = 10
18
19if(a === 10) {
20  console.log('bar')
21}
22`;
23
24class Diff extends PureComponent {
25  highlightSyntax = str => (
26    <pre
27      style={{ display: 'inline' }}
28      dangerouslySetInnerHTML={{
29        __html: Prism.highlight(str, Prism.languages.javascript),
30      }}
31    />
32  );
33
34  render = () => {
35    return (
36      <ReactDiffViewer
37        oldValue={oldCode}
38        newValue={newCode}
39        splitView={true}
40        renderContent={this.highlightSyntax}
41      />
42    );
43  };
44}

Text block diff comparison

Different styles of text block diffing are possible by using the enums corresponding to variou JsDiff methods (learn more). The supported methods are as follows.

1enum DiffMethod {
2  CHARS = 'diffChars',
3  WORDS = 'diffWords',
4  WORDS_WITH_SPACE = 'diffWordsWithSpace',
5  LINES = 'diffLines',
6  TRIMMED_LINES = 'diffTrimmedLines',
7  SENTENCES = 'diffSentences',
8  CSS = 'diffCss',
9}

1import React, { PureComponent } from 'react';
2import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
3
4const oldCode = `
5{
6  "name": "Original name",
7  "description": null
8}
9`;
10const newCode = `
11{
12  "name": "My updated name",
13  "description": "Brand new description",
14  "status": "running"
15}
16`;
17
18class Diff extends PureComponent {
19  render = () => {
20    return (
21      <ReactDiffViewer
22        oldValue={oldCode}
23        newValue={newCode}
24        compareMethod={DiffMethod.WORDS}
25        splitView={true}
26      />
27    );
28  };
29}

Overriding Styles

React Diff Viewer uses emotion for styling. It also offers a simple way to override styles and style variables. You can supply different variables for both light and dark themes. Styles will be common for both themes.

Below are the default style variables and style object keys.

1
2// Default variables and style keys
3
4const defaultStyles = {
5  variables: {
6    light: {
7      diffViewerBackground: '#fff',
8      diffViewerColor: '212529',
9      addedBackground: '#e6ffed',
10      addedColor: '#24292e',
11      removedBackground: '#ffeef0',
12      removedColor: '#24292e',
13      wordAddedBackground: '#acf2bd',
14      wordRemovedBackground: '#fdb8c0',
15      addedGutterBackground: '#cdffd8',
16      removedGutterBackground: '#ffdce0',
17      gutterBackground: '#f7f7f7',
18      gutterBackgroundDark: '#f3f1f1',
19      highlightBackground: '#fffbdd',
20      highlightGutterBackground: '#fff5b1',
21      codeFoldGutterBackground: '#dbedff',
22      codeFoldBackground: '#f1f8ff',
23      emptyLineBackground: '#fafbfc',
24      gutterColor: '#212529',
25      addedGutterColor: '#212529',
26      removedGutterColor: '#212529',
27      codeFoldContentColor: '#212529',
28      diffViewerTitleBackground: '#fafbfc',
29      diffViewerTitleColor: '#212529',
30      diffViewerTitleBorderColor: '#eee',
31    },
32    dark: {
33      diffViewerBackground: '#2e303c',
34      diffViewerColor: '#FFF',
35      addedBackground: '#044B53',
36      addedColor: 'white',
37      removedBackground: '#632F34',
38      removedColor: 'white',
39      wordAddedBackground: '#055d67',
40      wordRemovedBackground: '#7d383f',
41      addedGutterBackground: '#034148',
42      removedGutterBackground: '#632b30',
43      gutterBackground: '#2c2f3a',
44      gutterBackgroundDark: '#262933',
45      highlightBackground: '#2a3967',
46      highlightGutterBackground: '#2d4077',
47      codeFoldGutterBackground: '#21232b',
48      codeFoldBackground: '#262831',
49      emptyLineBackground: '#363946',
50      gutterColor: '#464c67',
51      addedGutterColor: '#8c8c8c',
52      removedGutterColor: '#8c8c8c',
53      codeFoldContentColor: '#555a7b',
54      diffViewerTitleBackground: '#2f323e',
55      diffViewerTitleColor: '#555a7b',
56      diffViewerTitleBorderColor: '#353846',
57    }
58  },
59  diffContainer?: {}, // style object
60  diffRemoved?: {}, // style object
61  diffAdded?: {}, // style object
62  marker?: {}, // style object
63  emptyGutter?: {}, // style object
64  highlightedLine?: {}, // style object
65  lineNumber?: {}, // style object
66  highlightedGutter?: {}, // style object
67  contentText?: {}, // style object
68  gutter?: {}, // style object
69  line?: {}, // style object
70  wordDiff?: {}, // style object
71  wordAdded?: {}, // style object
72  wordRemoved?: {}, // style object
73  codeFoldGutter?: {}, // style object
74  emptyLine?: {}, // style object
75  content?: {}, // style object
76  titleBlock?: {}, // style object
77  splitView?: {}, // style object
78}

To override any style, just pass the new style object to the styles prop. New style will be computed using Object.assign(default, override).

For keys other than variables, the value can either be an object or string interpolation.

1import React, { PureComponent } from 'react';
2import ReactDiffViewer from 'react-diff-viewer';
3
4const oldCode = `
5const a = 10
6const b = 10
7const c = () => console.log('foo')
8
9if(a > 10) {
10  console.log('bar')
11}
12
13console.log('done')
14`;
15const newCode = `
16const a = 10
17const boo = 10
18
19if(a === 10) {
20  console.log('bar')
21}
22`;
23
24class Diff extends PureComponent {
25  highlightSyntax = str => (
26    <span
27      style={{ display: 'inline' }}
28      dangerouslySetInnerHTML={{
29        __html: Prism.highlight(str, Prism.languages.javascript),
30      }}
31    />
32  );
33
34  render = () => {
35    const newStyles = {
36      variables: {
37        dark: {
38          highlightBackground: '#fefed5',
39          highlightGutterBackground: '#ffcd3c',
40        },
41      },
42      line: {
43        padding: '10px 2px',
44        '&:hover': {
45          background: '#a26ea1',
46        },
47      },
48    };
49
50    return (
51      <ReactDiffViewer
52        styles={newStyles}
53        oldValue={oldCode}
54        newValue={newCode}
55        splitView={true}
56        renderContent={this.highlightSyntax}
57      />
58    );
59  };
60}

Local Development

1yarn install
2yarn build # or use yarn build:watch
3yarn start:examples

Check package.json for more build scripts.

License

MIT