Github-like Diff View Component For React

The git-diff-view component allows developers to render differences between file versions visually, akin to the familiar interface of GitHub’s code review page.

Developers can quickly set up a diff view that supports custom widgets, syntax highlighting, and various view modes, including split and unified views.

How to use it:

1. Install and import the git-diff-view component.

$ pnpm add @git-diff-view/react
import "@git-diff-view/react/styles/diff-view.css";
import { DiffFile } from "@git-diff-view/React";

2. Create a diff view in your React app.

  /* return a valid react element to show the widget, this element will render when you click the `addWidget` button in the diff view */
  renderWidgetLine={({ onClose, side, lineNumber }) => jsx.element}
  /* the diff data need to show, type `{ oldFile: {fileName?: string, content?: string}, newFile: {fileName?: string, content?: string}, hunks: string[] }`, you can only pass hunks data, and the component will generate the oldFile and newFile data automatically */
  /* also support the outside `diffFile` to improve performance, so you can use `webWorker` to generate the diff data first, and then pass it to the component */
  /* a list to store the extend data to show in the `Diff View` */
  /* used to render extend data */
  renderExtendLine={({ data }) => jsx.element}
  /* diffView fontSize */
  /* syntax highlight */
  /* diffView mode: SplitView / UnifiedView */
  /* diffView wrap: code line auto wrap */
  /* enable `addWidget` button */
  /* when the `addWidget` button clicked */


Github-like Diff View Component For React

Download Details:

Author: MrWangJustToDo

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment