Diff Stat
Added and removed line counts with the five-square bar. The squares are proportional but never empty — one line changed in a thousand still lights one square.
src/components/ui/diff-stat.tsxAbout
From the component's own source, where it was written.
Added and removed line counts, with the five-square bar every forge uses.
The squares are proportional but never empty: a change of one line in a thousand still shows one lit square, because rounding it to zero would read as "nothing changed".
Install
npx astralyx-ui add diff-stat
Usage
import { DiffStat } from '@/components/ui/diff-stat'
<DiffStat additions={248} deletions={96} />Composer
Change the props and the source below follows.
+248−96
Props
tsx
<DiffStat additions={248} deletions={96} />Examples
Ratios
tsx
<DiffStat additions={248} deletions={96} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
DiffStat
Added and removed line counts, with the five-square bar every forge uses.
Extends ComponentProps<'span'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| additions | number | required | Line counts. The bar is proportional to their ratio. |
| deletions | number | required | Line counts. The bar is proportional to their ratio. |
| showCounts | boolean | true | Numbers beside the squares. |
| squares | number | 5 | How many squares the bar has. |