# @git-diff-view/react

> @git-diff-view/react

Latest version **0.1.8** (published 2026-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @git-diff-view/react
pnpm add @git-diff-view/react
yarn add @git-diff-view/react
bun add @git-diff-view/react
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2026-10-15 |
| First published | 2024-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 742 |
| Author | MrWangJustToDo |
| Maintainers | mrwang555 |
| Keywords | diff component, react diff component |

## Links

- npm: https://www.npmjs.com/package/@git-diff-view/react
- Repository: https://github.com/MrWangJustToDo/git-diff-view
- Homepage: https://mrwangjusttodo.github.io/git-diff-view
- Issues: https://github.com/MrWangJustToDo/git-diff-view/issues
- npm.io page: https://npm.io/package/@git-diff-view/react

## Dependencies (7)

- [lowlight](https://npm.io/package/lowlight.md) ^3.3.0
- [fast-diff](https://npm.io/package/fast-diff.md) ^1.3.0
- [@types/hast](https://npm.io/package/@types/hast.md) ^3.0.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.11.0
- [reactivity-store](https://npm.io/package/reactivity-store.md) ^0.4.1
- [@git-diff-view/core](https://npm.io/package/@git-diff-view/core.md) ^0.1.8
- [use-sync-external-store](https://npm.io/package/use-sync-external-store.md) ^1.6.0

## Recent versions

- 0.1.8 (latest) — 2026-10-15
- 0.0.1-beta.2 (beta) — 2024-01-31
- 0.1.7 — 2026-07-13
- 0.1.6 — 2026-06-21
- 0.1.5 — 2026-05-26
- 0.1.4 — 2026-05-18
- 0.1.3 — 2026-03-19
- 0.1.2 — 2026-03-12
- 0.1.1 — 2026-03-05
- 0.1.0 — 2026-03-04
- 0.0.40 — 2026-02-26
- 0.0.39 — 2026-02-04
- 0.0.38 — 2026-02-04
- 0.0.37 — 2026-02-04
- 0.0.36 — 2026-01-08
- … 35 more at https://npm.io/package/@git-diff-view/react/versions

## README

# @git-diff-view/react

> A high-performance React diff view component with GitHub-style UI

[![npm version](https://img.shields.io/npm/v/@git-diff-view/react)](https://www.npmjs.com/package/@git-diff-view/react)
[![npm downloads](https://img.shields.io/npm/dm/@git-diff-view/react)](https://www.npmjs.com/package/@git-diff-view/react)

## Features

- ✅ Split & Unified views
- ✅ Syntax highlighting with full context
- ✅ Light & Dark themes
- ✅ SSR & RSC support
- ✅ Widget & extend data system
- ✅ High performance with Web Worker support

## Installation

```bash
npm install @git-diff-view/react
# or
pnpm add @git-diff-view/react
# or
yarn add @git-diff-view/react
```

## Quick Start

### Basic Usage

```tsx
import { DiffView, DiffModeEnum } from "@git-diff-view/react";
import "@git-diff-view/react/styles/diff-view.css";

function MyDiffView() {
  return (
    <DiffView
      data={{
        oldFile: { fileName: "old.ts", content: "..." },
        newFile: { fileName: "new.ts", content: "..." },
        hunks: ["..."]
      }}
      diffViewMode={DiffModeEnum.Split}
      diffViewTheme="dark"
      diffViewHighlight
    />
  );
}
```

### Advanced Usage with DiffFile

**File Comparison Mode**

```tsx
import { DiffView } from "@git-diff-view/react";
import { DiffFile, generateDiffFile } from "@git-diff-view/file";
import "@git-diff-view/react/styles/diff-view.css";

const file = generateDiffFile(
  "old.ts", oldContent,
  "new.ts", newContent,
  "typescript", "typescript"
);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();

<DiffView diffFile={file} />
```

**Git Diff Mode**

```tsx
import { DiffView } from "@git-diff-view/react";
import { DiffFile } from "@git-diff-view/core";
import "@git-diff-view/react/styles/diff-view.css";

const file = new DiffFile(
  oldFileName,
  oldContent,
  newFileName,
  newContent,
  hunks,
  oldFileLang,
  newFileLang
);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();

<DiffView diffFile={file} />
```

## Styling

```tsx
// Default styles with Tailwind (next release will be pure CSS)
import "@git-diff-view/react/styles/diff-view.css";

// Pure CSS (no Tailwind conflicts)
import "@git-diff-view/react/styles/diff-view-pure.css";
```

## API Reference

### Props

| Prop | Type | Description |
|------|------|-------------|
| `data` | `DiffData` | Diff data with `oldFile`, `newFile`, and `hunks` |
| `diffFile` | `DiffFile` | Pre-processed diff file instance |
| `diffViewMode` | `Split \| Unified` | View mode (default: `Split`) |
| `diffViewTheme` | `light \| dark` | Theme (default: `light`) |
| `diffViewHighlight` | `boolean` | Enable syntax highlighting |
| `diffViewWrap` | `boolean` | Enable line wrapping |
| `diffViewFontSize` | `number` | Font size in pixels |
| `diffViewAddWidget` | `boolean` | Enable widget button |
| `renderWidgetLine` | `(props) => ReactNode` | Custom widget renderer |
| `renderExtendLine` | `(props) => ReactNode` | Custom extend data renderer |
| `extendData` | `ExtendData` | Additional data per line |
| `onAddWidgetClick` | `(props) => void` | Widget button click handler |

### DiffData Type

```typescript
type DiffData = {
  oldFile?: {
    fileName?: string | null;
    fileLang?: string | null;
    content?: string | null;
  };
  newFile?: {
    fileName?: string | null;
    fileLang?: string | null;
    content?: string | null;
  };
  hunks: string[];
};
```

## Examples

- [Basic React Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/react-example)
- [Next.js SSR Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-page-example)
- [Next.js RSC Example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/next-app-example)

## Live Demo

Try it online: [https://mrwangjusttodo.github.io/git-diff-view](https://mrwangjusttodo.github.io/git-diff-view)

## License

MIT © [MrWangJustToDo](https://github.com/MrWangJustToDo)

---
_Source: https://npm.io/package/@git-diff-view/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._