Fingerprint Diff
Two device fingerprints, with only the differing attributes shown. The question is never what a device looks like — it is what changed between two sessions, and twenty-eight matching rows hide the two that matter.
src/components/ui/fingerprint-diff.tsxAbout
From the component's own source, where it was written.
Two device fingerprints side by side, with the differing attributes called out.
Fingerprints are thirty-odd attributes of which twenty-eight usually match, so matching rows are collapsed by default. The question is never "what does this device look like" — it is "what changed between these two sessions", and everything identical is noise hiding the two lines that matter.
A missing attribute is shown as absent rather than blank. A fingerprint that *stopped reporting* its canvas hash is itself a signal — usually an anti-detect browser — and rendering it as an empty cell loses that entirely.
Install
npx astralyx-ui add fingerprint-diff
Usage
import { FingerprintDiff } from '@/components/ui/fingerprint-diff'
<FingerprintDiff attributes={attributes} leftLabel="Session A" rightLabel="Session B" />Composer
Change the props and the source below follows.
- canvas_hash !
- a41f9c22
- not reported
- webgl_vendor !
- Apple Inc.
- Google Inc. (Apple)
- timezone !
- Europe/London
- Europe/Kyiv
<FingerprintDiff attributes={attributes} leftLabel="Session A" rightLabel="Session B" />Examples
Two devices compared
<FingerprintDiff attributes={attributes} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
FingerprintDiff
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| attributes | FingerprintAttribute[] | required | { key, label?, left, right, significance? }. |
| leftLabel | ReactNode | 'Session A' | — |
| rightLabel | ReactNode | 'Session B' | — |
| defaultShowMatching | boolean | false | Matching rows are collapsed behind a count, and always reachable. |
| identicalMessage | ReactNode | 'Every attribute matches.' | — |
| significanceLabel | string | 'high significance' | Accessible name for the high-significance marker. |
| values | shown as absent | — | A null renders as "not reported", never as blank. A fingerprint that stopped reporting its canvas hash is itself a signal — usually an anti-detect browser. |
Types
FingerprintAttribute
Two device fingerprints side by side, with the differing attributes called out.
| Field | Type | Description |
|---|---|---|
| key | string | — |
| label? | ReactNode | — |
| left? | string | number | null | — |
| right? | string | number | null | — |
| significance? | 'high' | 'normal' | Marks the attributes worth escalating on. A changed timezone is not a changed WebGL vendor. |