Computing diff...
)}
/>
```
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
 Eric M. 💻 |
 Andrei Kovalevsky 💻 |
 Chang Hyun Kim 💻 |
A simple and beautiful text diff viewer made with{' '} Diff{' '} and{' '} React.{' '} Featuring split view, inline view, word diff, line highlight and more.
This documentation is for the `next` release branch, e.g. v4.x
Dark theme
Split pane
Syntax highlighting
Show Summary
Column Headers
Custom gutter
Line Numbers
Infinite Loading
Show Loading Text
Disable Worker
Data
Diff method
{diffData.type == 3
? 'CHG'
: diffData.type == 2
? 'DEL'
: diffData.type == 1
? 'ADD'
: diffData.type
? '==='
: undefined}
Loading diff...
{lineNumber}
{additionalLineNumber}
{added && "+"}
{removed && "-"}
{showLoadingOverlay && (
);
};
}
export default DiffViewer;
export { DiffMethod };
export { default as computeStyles } from "./styles.js";
export {
defaultLightThemeVariables,
defaultDarkThemeVariables,
} from "./styles.js";
export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles, ReactDiffViewerStylesVariables };
================================================
FILE: src/styles.ts
================================================
import createEmotion from "@emotion/css/create-instance";
import type { Interpolation } from "@emotion/react";
export interface ReactDiffViewerStyles {
diffContainer: string;
diffRemoved: string;
diffAdded: string;
diffChanged: string;
line: string;
highlightedGutter: string;
contentText: string;
lineContent: string;
gutter: string;
highlightedLine: string;
lineNumber: string;
marker: string;
wordDiff: string;
wordAdded: string;
wordRemoved: string;
codeFoldGutter: string;
codeFoldExpandButton: string;
summary: string;
codeFoldContentContainer: string;
emptyGutter: string;
emptyLine: string;
codeFold: string;
codeFoldContent: string;
stickyHeader: string;
columnHeaders: string;
titleBlock: string;
content: string;
column: string;
noSelect: string;
noWrap: string;
splitView: string;
allExpandButton: string;
block: string;
blockAddition: string;
blockDeletion: string;
[key: string]: string;
}
export interface ReactDiffViewerStylesVariables {
diffViewerBackground?: string;
diffViewerTitleBackground?: string;
diffViewerColor?: string;
diffViewerTitleColor?: string;
diffViewerTitleBorderColor?: string;
addedBackground?: string;
addedColor?: string;
removedBackground?: string;
removedColor?: string;
changedBackground?: string;
wordAddedBackground?: string;
wordRemovedBackground?: string;
addedGutterBackground?: string;
removedGutterBackground?: string;
gutterBackground?: string;
gutterBackgroundDark?: string;
highlightBackground?: string;
highlightGutterBackground?: string;
codeFoldGutterBackground?: string;
codeFoldBackground?: string;
emptyLineBackground?: string;
gutterColor?: string;
addedGutterColor?: string;
removedGutterColor?: string;
codeFoldContentColor?: string;
}
export interface ReactDiffViewerStylesOverride {
variables?: {
dark?: ReactDiffViewerStylesVariables;
light?: ReactDiffViewerStylesVariables;
};
diffContainer?: Interpolation;
diffRemoved?: Interpolation;
diffAdded?: Interpolation;
diffChanged?: Interpolation;
marker?: Interpolation;
emptyGutter?: Interpolation;
highlightedLine?: Interpolation;
lineNumber?: Interpolation;
highlightedGutter?: Interpolation;
contentText?: Interpolation;
gutter?: Interpolation;
lineContent?: Interpolation;
line?: Interpolation;
wordDiff?: Interpolation;
wordAdded?: Interpolation;
wordRemoved?: Interpolation;
codeFoldGutter?: Interpolation;
codeFoldExpandButton?: Interpolation;
summary?: Interpolation;
codeFoldContentContainer?: Interpolation;
codeFold?: Interpolation;
emptyLine?: Interpolation;
content?: Interpolation;
noSelect?: Interpolation;
column?: Interpolation;
titleBlock?: Interpolation;
splitView?: Interpolation;
allExpandButton?: Interpolation;
}
export const defaultLightThemeVariables: Readonly<
Required
{(!this.props.hideSummary || leftTitle || rightTitle) && (
) : (
tableElement
)}
{/* Hidden element for measuring character width */}
{/* Debug overlay */}
{this.props.infiniteLoading && this.props.showDebugInfo && (
{this.state.cumulativeOffsets && (
)}
)}
{!this.props.hideSummary && (
)}
)}
{this.props.infiniteLoading ? (
{" "}
{totalChanges}
)}
{(leftTitle || rightTitle) && (
{blocks}
{this.props.summary ? {this.props.summary} : null}
{leftTitle ? (
{splitView && (
{leftTitle}
) : null}
{rightTitle ? (
)}
{rightTitle}
) : null}
{tableElement}
Debug Info
scrollTop: {nodes.debug.scrollTop}
headerHeight: {nodes.debug.headerHeight}
contentScrollTop: {nodes.debug.contentScrollTop}
clientHeight: {nodes.debug.clientHeight}
visibleRowStart: {nodes.debug.visibleRowStart}
visibleRowEnd: {nodes.debug.visibleRowEnd}
totalRows: {nodes.debug.totalRows}
offsetsLength: {nodes.debug.offsetsLength}
renderedCount: {nodes.debug.renderedCount}
topPadding: {nodes.topPadding.toFixed(0)}
bottomPadding: {nodes.bottomPadding.toFixed(0)}
totalContentHeight: {nodes.totalContentHeight.toFixed(0)}
cumulativeOffsets: {this.state.cumulativeOffsets ? 'SET' : 'NULL'}
columnWidth: {this.state.contentColumnWidth?.toFixed(0) ?? 'N/A'}px
charWidth: {this.state.charWidth?.toFixed(2) ?? 'N/A'}px
charsPerRow: {this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'}
offsets[{nodes.debug.visibleRowEnd}]: {this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]?.toFixed(0) ?? 'N/A'}
offsets[{nodes.debug.totalRows - 1}]: {this.state.cumulativeOffsets[nodes.debug.totalRows - 1]?.toFixed(0) ?? 'N/A'}
offsets[{nodes.debug.totalRows}]: {this.state.cumulativeOffsets[nodes.debug.totalRows]?.toFixed(0) ?? 'N/A'}
viewportEnd: {(nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)}
scrollHeight: {this.state.scrollableContainerRef.current?.scrollHeight ?? 'N/A'}
maxScrollTop: {(this.state.scrollableContainerRef.current?.scrollHeight ?? 0) - nodes.debug.clientHeight}