DiffStat
diff-statSummarizes added and removed lines with proportional bars and file-status badges.
Usage
Basic usage
+N −M Number + green and red grid bars filled according to the addition and deletion ratio, PR is just needed for list/code review.
<DiffStat additions={24} deletions={6} />Status Logo
status Rendering Add/Modify/Delete/Rename Logo (renamed Borrow primary Blue Difference modified).
<>
<DiffStat additions={142} deletions={0} status="added" />
<DiffStat additions={24} deletions={6} status="modified" />
<DiffStat additions={0} deletions={88} status="deleted" />
<DiffStat additions={3} deletions={3} status="renamed" />
</>Grid strips only
showCounts={false} hides the numbers, leaving only compact green and red grid bars.
<DiffStat additions={7} deletions={2} showCounts={false} />Dimensions
size="sm" Reduce the grid and follow the text within the line.
<>
<DiffStat additions={10} deletions={4} size="sm" />
<DiffStat additions={10} deletions={4} size="md" />
</>When to use
Use DiffStat in pull-request or commit lists to summarize a file's additions, deletions, and change status. Use Sparkline for trends or FileTree for hierarchical changed-file navigation.
Import
import { DiffStat, splitBlocks } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| additions* | number | — | Number of added lines. |
| deletions* | number | — | Number of deleted lines. |
| status | "added" | "modified" | "deleted" | "renamed" | — | Optional file-status badge. |
| blocks | number | 5 | Total number of proportional blocks. |
| showCounts | boolean | true | Shows the addition and deletion counts. |
| size | "sm" | "md" | "md" | Component size. |
| className | string | — | Custom class name. |
Pitfalls
The bar divides blocks according to the additions:deletions ratio through the pure splitBlocks helper. When both counts are zero, the bar remains empty.
Status badge accessibility text remains Chinese at runtime: "\u65b0\u589e" ("Added"), "\u4fee\u6539" ("Modified"), "\u5220\u9664" ("Deleted"), and "\u91cd\u547d\u540d" ("Renamed").
Related
Status badges follow ConfigProvider. DiffStat is a client component; server components can still import and render it.
Sparkline · ImageViewer · LiveProductCard · ScoreRing · Badge · Dot
Playground
<DiffStat additions={24} deletions={6} status="modified" blocks={5} />