Components
FieldDiff
Side-by-side comparison of original and corrected field values with change highlighting.
Category: Data Display / Standalone
Import
import { FieldDiff, type FieldDiffProps } from "@hareru/ui"Exports
| Name | Type | Description |
|---|---|---|
FieldDiff | Component | Field diff comparison |
FieldDiffProps | Type | Props interface |
Key Props
| Prop | Type | Default | Description |
|---|---|---|---|
original | Record<string, unknown> | — | Original field values (required) |
corrected | Record<string, unknown> | — | Corrected field values (required) |
changedFields | string[] | — | List of field keys that were changed (required) |
labels | Record<string, string> | — | Human-readable labels for field keys |
States
| State | Type | Values | Default | CSS Reflection |
|---|---|---|---|---|
mode | enum | inline | side-by-side | inline | — |
Usage
import { FieldDiff } from "@hareru/ui"
<FieldDiff
original={{ name: "John", email: "john@old.com", role: "user" }}
corrected={{ name: "John", email: "john@new.com", role: "admin" }}
changedFields={["email", "role"]}
labels={{ name: "Name", email: "Email", role: "Role" }}
/>Notes
- All keys from both
originalandcorrectedare displayed. Changed fields are highlighted withhui-field-diff__row--changedmodifier. - Changed values show original (with
--removedstyling) → arrow → corrected (with--addedstyling). - If
labelsis not provided, the raw field key is used as the display label. - Values are converted to strings via
String()for display.