Description:
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 $ 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.
<DiffView
className
/* 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 */
data={data[v]}
/* 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 */
diffFile={diffFileInstance}
/* a list to store the extend data to show in the `Diff View` */
extendData={extend}
/* used to render extend data */
renderExtendLine={({ data }) => jsx.element}
/* diffView fontSize */
diffViewFontSize={fontSize}
/* syntax highlight */
diffViewHighlight={highlight}
/* diffView mode: SplitView / UnifiedView */
diffViewMode={mode}
/* diffView wrap: code line auto wrap */
diffViewWrap={wrap}
/* enable `addWidget` button */
diffViewAddWidget
/* when the `addWidget` button clicked */
onAddWidgetClick
/>;Preview:
