react-diff-viewer-continued

react-diff-viewer-continued is a React component, built on the diff (jsdiff) library, that renders a GitHub-style diff between two blocks of text. It is a maintained continuation of the original react-diff-viewer package by Pranesh Ravi, updated to work with modern React and build tooling, and supports both split and inline (unified) view modes.

The component includes word-level diff highlighting inside changed lines, line folding for unchanged sections (with a configurable number of surrounding context lines), line highlighting and click handlers for building review UIs, a render-prop API for syntax highlighting, and optimized structural comparison modes for JSON and YAML in addition to plain character/word/line diffing.

What You Get

• A single ReactDiffViewer component accepting oldValue/newValue and rendering a split or inline diff view
• Word-level diff highlighting within changed lines, plus a pluggable compareMethod (chars, words, lines, JSON, YAML)
• Line folding for unchanged regions via showDiffOnly and extraLinesSurroundingDiff, with a customizable fold-message renderer
• Line click and highlight handlers (onLineNumberClick, highlightLines) for building review/annotation UIs
• A renderContent render-prop for injecting syntax highlighting, plus a styles prop for full visual customization and a built-in dark theme

Common Use Cases

• Building a code-review UI that shows before/after diffs of a file or code snippet
• Displaying a diff of two JSON or YAML configuration versions using the structural JSON/YAML compare methods
• Showing a content-revision history view (e.g. CMS or documentation diffs) with word-level highlighting
• Embedding a syntax-highlighted diff viewer in an internal admin tool using the renderContent render prop
• Adding click-to-highlight line annotation to a custom review or commenting interface

Under The Hood

Architecture - The component computes diff data via compute-lines.ts and compute-hidden-blocks.ts, using the diff (jsdiff) library for the underlying text comparison, then renders the result through index.tsx with supporting fold.tsx/expand.tsx components for collapsed unchanged regions. A computeWorker.ts module offloads diff computation, keeping large-diff rendering off the main thread.

Tech Stack - Written in TypeScript, built to dual CJS/ESM output (lib/cjs and lib/esm) with generated type declarations; styling is handled through an internal styles.ts module with an override-able styles prop rather than a CSS framework dependency, and highlight-theme.ts/highlight.tsx provide the built-in theme and highlighting utilities.

Code Quality - The repository does not include a visible unit-test suite alongside the src/ component files; quality is instead maintained through semantic-release-driven versioning (visible in the contributor list) and continued community pull requests since the fork’s original author handed off maintenance.

API Design - The component keeps a single, wide prop surface (oldValue/newValue/splitView/compareMethod/etc.) rather than requiring composition of sub-components, which makes basic usage a one-line diff render while still exposing render props (renderContent, renderGutter, codeFoldMessageRenderer) for teams that need custom rendering.