react-diff-viewer-continued

You can install the package using yarn, npm, or pnpm.

yarn add react-diff-viewer-continued

# or

npm i react-diff-viewer-continued

# or

pnpm add react-diff-viewer-continued

For large files, use Virtualization via the infiniteLoading prop to ensure only visible rows are rendered, preventing browser lag.

Virtualization Configuration

Pass an object to infiniteLoading with these keys:

• pageSize: Number of rows to render per batch.
• containerHeight: The height of the scrollable container (e.g., '500px' or '80vh').
• overscan (optional): Number of extra rows to render above/below the viewport (defaults to 20).

Additional Performance Props

• loadingElement: A function returning a ReactElement to display while diffing is in progress or during fast scrolling. Highly recommended when using infiniteLoading.
• disableWorker: If your bundler configuration causes Web Worker loading to fail, set this to true to fallback to synchronous computation on the main thread.

For files with thousands of lines, use the infiniteLoading prop to enable virtualization. This ensures only visible rows are rendered, and word-level diffs are computed on-demand as lines become visible. You can also provide a loadingElement to show a placeholder while the initial diff is being computed.

Key infiniteLoading options:

• pageSize: Number of rows to load per batch.
• containerHeight: The height of the container (e.g., '80vh').
• overscan: Number of rows to render outside the visible area.

<ReactDiffViewer
  oldValue={largeOldFile}
  newValue={largeNewFile}
  infiniteLoading={{
    pageSize: 20,
    containerHeight: '80vh',
    overscan: 20,
  }}
  loadingElement={() => (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      Computing diff...
    </div>
  )}
/>

To enable syntax highlighting, provide the highlightLanguage prop (e.g., 'javascript', 'python').

To customize the colors of the highlighted tokens, use the highlightTheme prop. This prop merges with the default theme. You can also toggle between light and dark base themes using useDarkTheme.

Note: When highlightLanguage is provided, it takes precedence over renderContent. If highlightLanguage is active, any custom rendering logic provided via renderContent for line content will be ignored.

The highlightLanguage feature uses a HighlightTheme object to apply colors to code tokens. The theme is a mapping where keys are Prism token types (e.g., keyword, attr-name) and values are hex color strings.

Colors are applied via inline styles, so they do not require external CSS imports and will not collide with your host page's styles. If a token type is not found in the theme, it falls back to the default key. Unknown or unmapped tokens use the default color.

export type HighlightTheme = Record<string, string>;

const myCustomTheme: HighlightTheme = {
  default: "#24292e",
  keyword: "#d73a49",
  string: "#032f62",
  // ... other Prism token types
};

To enable syntax highlighting, provide a valid language name (compatible with Prism or Refractor) to the highlightLanguage prop. This takes precedence over renderContent for line content. If the language is unknown, it falls back to plain text.

Note: Syntax highlighting is merged with word-diff marks on changed lines to ensure both are visible.

<DiffViewer
  oldValue={oldCode}
  newValue={newCode}
  highlightLanguage="typescript"
  highlightTheme={myCustomTheme}
/>

To use the component, import ReactDiffViewer from react-diff-viewer-continued. Provide the original text to the oldValue prop and the modified text to the newValue prop. You can use the splitView prop (boolean) to toggle between split view and inline view.

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} />
    );
  };
}

The resetCodeBlocks() instance method resets all expanded code blocks to their initial state. It returns true if the reset was successful and false if it failed.

// Usage depends on accessing the instance of ReactDiffViewer
instance.resetCodeBlocks();
// Returns true or false

To add syntax highlighting, use the renderContent render prop. This prop accepts a function with the signature renderContent(content: string) => JSX.Element. You can integrate libraries like Prism JS or Highlight.js within this function to wrap the diffed text in styled elements.

import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer-continued';

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}
      />
    );
  };
}