react-diff-viewer
Advanced tools
A simple and beautiful text diff viewer component made with diff and React
react-diff-viewer is a React component library that provides a simple and customizable way to display differences between two pieces of text. It is commonly used for code review tools, version control systems, and any application that needs to show changes between two versions of text.
Basic Diff Viewer
This feature allows you to display a basic side-by-side diff view of two pieces of text. The `splitView` prop determines whether the diff is shown in a split view or inline.
import React from 'react';
import DiffViewer from 'react-diff-viewer';
const oldText = 'Hello World';
const newText = 'Hello React World';
const App = () => (
<DiffViewer oldValue={oldText} newValue={newText} splitView={true} />
);
export default App;Inline Diff Viewer
This feature allows you to display an inline diff view of two pieces of text. Setting the `splitView` prop to `false` will render the diff inline.
import React from 'react';
import DiffViewer from 'react-diff-viewer';
const oldText = 'Hello World';
const newText = 'Hello React World';
const App = () => (
<DiffViewer oldValue={oldText} newValue={newText} splitView={false} />
);
export default App;Customizing Diff Colors
This feature allows you to customize the colors used in the diff viewer. You can provide a `styles` prop with custom styles to change the background colors for added and removed lines, as well as word-level changes.
import React from 'react';
import DiffViewer from 'react-diff-viewer';
const oldText = 'Hello World';
const newText = 'Hello React World';
const customStyles = {
variables: {
light: {
diffViewerBackground: '#f7f7f7',
addedBackground: '#e6ffed',
removedBackground: '#ffeef0',
wordAddedBackground: '#acf2bd',
wordRemovedBackground: '#fdb8c0',
},
},
};
const App = () => (
<DiffViewer oldValue={oldText} newValue={newText} splitView={true} styles={customStyles} />
);
export default App;react-diff is another React component for displaying text differences. It provides a simple API for rendering diffs and supports both inline and side-by-side views. Compared to react-diff-viewer, it offers fewer customization options but is easier to set up for basic use cases.
diff2html is a library that converts unified diff output into HTML. It can be used with React to display diffs in a web application. While it is not a React-specific library, it offers more flexibility in terms of diff formatting and can be integrated with various front-end frameworks.
react-diff-view is a React component for rendering diffs with a focus on code review use cases. It supports syntax highlighting and inline comments, making it suitable for more complex diff visualization needs. Compared to react-diff-viewer, it offers more advanced features but may require more setup.
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
yarn add react-diff-viewer
# or
npm i react-diff-viewer
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';
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 | '' | 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. |
resetCodeBlocks() - Resets the expanded code blocks to it's initial state. Return true on successful reset and false during unsuccessful reset.
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
// 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>
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';
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 variou JsDiff methods (learn more). The supported methods are as follows.
enum DiffMethod {
CHARS = 'diffChars',
WORDS = 'diffWords',
WORDS_WITH_SPACE = 'diffWordsWithSpace',
LINES = 'diffLines',
TRIMMED_LINES = 'diffTrimmedLines',
SENTENCES = 'diffSentences',
CSS = 'diffCss',
}
import React, { PureComponent } from 'react';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
const oldCode = `
{
"name": "Original name",
"description": null
}
`;
const newCode = `
{
"name": "My updated name",
"description": "Brand new description",
"status": "running"
}
`;
class Diff extends PureComponent {
render = () => {
return (
<ReactDiffViewer
oldValue={oldCode}
newValue={newCode}
compareMethod={DiffMethod.WORDS}
splitView={true}
/>
);
};
}
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.
// 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
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.
import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';
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}
/>
);
};
}
yarn install
yarn build # or use yarn build:watch
yarn start:examples
Check package.json for more build scripts.
MIT
FAQs
A simple and beautiful text diff viewer component made with diff and React
The npm package react-diff-viewer receives a total of 110,761 weekly downloads. As such, react-diff-viewer popularity was classified as popular.
We found that react-diff-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.