react-diff-viewer-continued
Version:
Continuation of a simple and beautiful text diff viewer component made with diff and React
522 lines (428 loc) • 26.5 kB
Markdown
<img src='https://github.com/Aeolun/react-diff-viewer-continued/raw/main/logo_dark.png' width="100%" alt='React Diff Viewer' />
<br/>
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
[](https://www.npmjs.com/package/react-diff-viewer-continued)
[](https://www.npmjs.com/package/react-diff-viewer-continued)
[](https://github.com/aeolun/react-diff-viewer-continued/blob/main/LICENSE)
A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
Inspired by the 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.
Most credit goes to [Pranesh Ravi](https://praneshravi.in) who created the [original diff viewer](https://github.com/praneshr/react-diff-viewer). I've just made a few modifications and updated the dependencies so they work with modern stacks.
```bash
yarn add react-diff-viewer-continued
npm i react-diff-viewer-continued
pnpm add react-diff-viewer-continued
```
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';
const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
`;
const newCode = `
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
`;
class Diff extends PureComponent {
render = () => {
return (
<ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
);
};
}
```
| Prop | Type | Default | Description |
|---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| oldValue | `string \| Object` | `''` | Old value as string (or Object if using `DiffMethod.JSON`). |
| newValue | `string \| Object` | `''` | New value as string (or Object if using `DiffMethod.JSON`). |
| splitView | `boolean` | `true` | Switch between `unified` and `split` view. |
| disableWordDiff | `boolean` | `false` | Show and hide word diff in a diff line. |
| compareMethod | `DiffMethod \| (string, string) => diff.Change[]` | `DiffMethod.CHARS` | JsDiff text diff method. See [Text block diff comparison](
| renderGutter | `(diffData) => ReactNode` | `undefined` | Function that can be used to render an extra gutter with various information next to the line number. |
| hideLineNumbers | `boolean` | `false` | Show and hide line numbers. |
| alwaysShowLines | `string[]` | `[]` | List of lines to always be shown, regardless of diff status. Line numbers 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. `extraLinesSurroundingDiff` applies to these lines as well. |
| 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, event: MouseEvent) => void` |
| highlightLines | `string[]` | `[]` | List of lines to be highlighted. Works together with `onLineNumberClick`. Line numbers 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` | `undefined` | Render Prop API to render code fold message. `(totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement` |
| styles | `object` | `{}` | To override style variables and styles. Learn more about [overriding styles](
| useDarkTheme | `boolean` | `false` | To enable/disable dark theme. |
| leftTitle | `string \| ReactElement` | `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 \| ReactElement` | `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. |
| summary | `string \| ReactElement` | `undefined` | Text or element to display in the summary bar (e.g., filename). |
| hideSummary | `boolean` | `false` | Hide the summary bar (expand/collapse button, change count, summary text). |
| infiniteLoading | `{ pageSize: number, containerHeight: string }` | `undefined` | Enable virtualization for large diffs. When enabled, only visible rows are rendered. `containerHeight` sets the scrollable container height (e.g., `'500px'` or `'80vh'`). |
| loadingElement | `() => ReactElement` | `undefined` | Function that returns an element to display while the diff is being computed. Useful with `infiniteLoading` for large files. |
| nonce | `string` | `''` | Nonce to use for inline styles (for CSP). |
## Instance Methods
`resetCodeBlocks()` - Resets the expanded code blocks to its initial state. Returns `true` on successful reset and `false` during unsuccessful reset.
## Large Diffs and Performance
For large files (thousands of lines), the diff viewer provides several features to maintain good performance:
### Virtualization with infiniteLoading
Enable virtualization to only render visible rows:
```javascript
<ReactDiffViewer
oldValue={largeOldFile}
newValue={largeNewFile}
infiniteLoading={{
pageSize: 20,
containerHeight: '80vh'
}}
loadingElement={() => (
<div style={{ padding: '20px', textAlign: 'center' }}>
Computing diff...
</div>
)}
/>
```
When `infiniteLoading` is enabled:
- Only visible rows are rendered (virtualization)
- Word-level diffs are computed on-demand as lines become visible
- A loading element can be shown while the initial diff is computed
### Use optimized diff methods for structured data
For JSON and YAML files, always use the dedicated diff methods:
```javascript
// For JSON files - up to 100x faster for large files
<ReactDiffViewer
oldValue={jsonObject}
newValue={newJsonObject}
compareMethod={DiffMethod.JSON}
/>
// For YAML files
<ReactDiffViewer
oldValue={yamlString}
newValue={newYamlString}
compareMethod={DiffMethod.YAML}
/>
```
See [JSON and YAML diffing](
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](https://prismjs.com)
```html
// Load Prism CSS
<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"
/>
// Load Prism JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
```
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';
const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
`;
const newCode = `
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
`;
class Diff extends PureComponent {
highlightSyntax = (str) => (
<pre
style={{ display: 'inline' }}
dangerouslySetInnerHTML={{
__html: Prism.highlight(str, Prism.languages.javascript),
}}
/>
);
render = () => {
return (
<ReactDiffViewer
oldValue={oldCode}
newValue={newCode}
splitView={true}
renderContent={this.highlightSyntax}
/>
);
};
}
```
Different styles of text block diffing are possible by using the enums corresponding to various JsDiff methods ([learn more](https://github.com/kpdecker/jsdiff/tree/v4.0.1#api)). The supported methods are as follows.
```javascript
enum DiffMethod {
CHARS = 'diffChars',
WORDS = 'diffWords',
WORDS_WITH_SPACE = 'diffWordsWithSpace',
LINES = 'diffLines',
TRIMMED_LINES = 'diffTrimmedLines',
SENTENCES = 'diffSentences',
CSS = 'diffCss',
JSON = 'diffJson', // Optimized for JSON files
YAML = 'diffYaml', // Optimized for YAML files
}
```
For JSON and YAML files, use the dedicated `DiffMethod.JSON` and `DiffMethod.YAML` methods. These use an optimized structural comparison algorithm that is **significantly faster** than generic text diff for large files.
**Why use these methods?**
Generic text diff algorithms (like `CHARS` or `WORDS`) compare files character-by-character using the Myers diff algorithm, which has O(ND) complexity where N is the file size and D is the number of differences. For large JSON/YAML files (thousands of lines), this can take several seconds or even freeze the browser.
The `JSON` and `YAML` methods instead:
1. Parse the data structure
2. Compare objects/arrays structurally
3. Only run text diff on the parts that actually differ
This reduces comparison time from seconds to milliseconds for typical configuration files.
```javascript
import React from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
// For JSON - can pass objects directly
const oldJson = { name: "Original", items: [1, 2, 3] };
const newJson = { name: "Updated", items: [1, 2, 3, 4] };
// For YAML - pass as strings
const oldYaml = `
name: Original
items:
- 1
- 2
`;
const newYaml = `
name: Updated
items:
- 1
- 2
- 3
`;
function JsonDiff() {
return (
<ReactDiffViewer
oldValue={oldJson}
newValue={newJson}
compareMethod={DiffMethod.JSON}
splitView={true}
/>
);
}
function YamlDiff() {
return (
<ReactDiffViewer
oldValue={oldYaml}
newValue={newYaml}
compareMethod={DiffMethod.YAML}
splitView={true}
/>
);
}
```
For regular code or text files, use the standard diff methods:
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
const oldCode = `
const a = 10
const b = 10
`;
const newCode = `
const a = 10
const boo = 10
`;
class Diff extends PureComponent {
render = () => {
return (
<ReactDiffViewer
oldValue={oldCode}
newValue={newCode}
compareMethod={DiffMethod.WORDS}
splitView={true}
/>
);
};
}
```
React Diff Viewer uses [emotion](https://emotion.sh/) 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.
```javascript
// Default variables and style keys
const defaultStyles = {
variables: {
light: {
diffViewerBackground: '#fff',
diffViewerColor: '#212529',
addedBackground: '#e6ffed',
addedColor: '#24292e',
removedBackground: '#ffeef0',
removedColor: '#24292e',
wordAddedBackground: '#acf2bd',
wordRemovedBackground: '#fdb8c0',
addedGutterBackground: '#cdffd8',
removedGutterBackground: '#ffdce0',
gutterBackground: '#f7f7f7',
gutterBackgroundDark: '#f3f1f1',
highlightBackground: '#fffbdd',
highlightGutterBackground: '#fff5b1',
codeFoldGutterBackground: '#dbedff',
codeFoldBackground: '#f1f8ff',
emptyLineBackground: '#fafbfc',
gutterColor: '#212529',
addedGutterColor: '#212529',
removedGutterColor: '#212529',
codeFoldContentColor: '#212529',
diffViewerTitleBackground: '#fafbfc',
diffViewerTitleColor: '#212529',
diffViewerTitleBorderColor: '#eee',
},
dark: {
diffViewerBackground: '#2e303c',
diffViewerColor: '#FFF',
addedBackground: '#044B53',
addedColor: 'white',
removedBackground: '#632F34',
removedColor: 'white',
wordAddedBackground: '#055d67',
wordRemovedBackground: '#7d383f',
addedGutterBackground: '#034148',
removedGutterBackground: '#632b30',
gutterBackground: '#2c2f3a',
gutterBackgroundDark: '#262933',
highlightBackground: '#2a3967',
highlightGutterBackground: '#2d4077',
codeFoldGutterBackground: '#21232b',
codeFoldBackground: '#262831',
emptyLineBackground: '#363946',
gutterColor: '#464c67',
addedGutterColor: '#8c8c8c',
removedGutterColor: '#8c8c8c',
codeFoldContentColor: '#555a7b',
diffViewerTitleBackground: '#2f323e',
diffViewerTitleColor: '#555a7b',
diffViewerTitleBorderColor: '#353846',
}
},
diffContainer?: {}, // style object
diffRemoved?: {}, // style object
diffAdded?: {}, // style object
marker?: {}, // style object
emptyGutter?: {}, // style object
highlightedLine?: {}, // style object
lineNumber?: {}, // style object
highlightedGutter?: {}, // style object
contentText?: {}, // style object
gutter?: {}, // style object
line?: {}, // style object
wordDiff?: {}, // style object
wordAdded?: {}, // style object
wordRemoved?: {}, // style object
codeFoldGutter?: {}, // style object
codeFold?: {}, // style object
emptyLine?: {}, // style object
content?: {}, // style object
titleBlock?: {}, // style object
splitView?: {}, // style object
}
```
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.
```javascript
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';
const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
`;
const newCode = `
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
`;
class Diff extends PureComponent {
highlightSyntax = (str) => (
<span
style={{ display: 'inline' }}
dangerouslySetInnerHTML={{
__html: Prism.highlight(str, Prism.languages.javascript),
}}
/>
);
render = () => {
const newStyles = {
variables: {
dark: {
highlightBackground: '#fefed5',
highlightGutterBackground: '#ffcd3c',
},
},
line: {
padding: '10px 2px',
'&:hover': {
background: '#a26ea1',
},
},
};
return (
<ReactDiffViewer
styles={newStyles}
oldValue={oldCode}
newValue={newCode}
splitView={true}
renderContent={this.highlightSyntax}
/>
);
};
}
```
```bash
pnpm install
pnpm build
pnpm start:examples
```
Check package.json for more build scripts.
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/ericmorgan1"><img src="https://avatars.githubusercontent.com/u/10346191?v=4?s=100" width="100px;" alt="Eric M."/><br /><sub><b>Eric M.</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=ericmorgan1" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/spyroid"><img src="https://avatars.githubusercontent.com/u/844495?v=4?s=100" width="100px;" alt="Andrei Kovalevsky"/><br /><sub><b>Andrei Kovalevsky</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=spyroid" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="http://kimbiyam.me"><img src="https://avatars.githubusercontent.com/u/59679962?v=4?s=100" width="100px;" alt="Chang Hyun Kim"/><br /><sub><b>Chang Hyun Kim</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=KimBiYam" title="Code">💻</a></td>
</tr>
</tbody>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
MIT