/// Data Display
CodeRef
An inline mono id/hash chip with middle-truncation — copy-on-click, or a link when href is set.
import { CodeRef } from "@protocore/pds";Basics
Pass the full value; the chip shows a middle-truncated form and copies the verbatim string on click, briefly flashing COPIED. It always carries the full value in its title for hover inspection.
Truncation & override
chars sets the maximum visible glyph count; longer values keep the head and tail with an ellipsis in the middle — so hashes stay identifiable at both ends. Pass children to show a custom label verbatim (no truncation) while still copying full.
As a link
Give it an href and it renders an anchor instead of a copy button — e.g. a transaction hash that opens the explorer.
When to use it
CodeRef is for machine identifiers a human occasionally needs to copy or inspect — tx hashes, block numbers, request IDs, addresses, API object IDs. Middle-truncation keeps the row compact while preserving the distinctive head and tail.
Use Tag for human metadata labels (a category, a version) that aren't copied. Use MaskedValue when the value is secret and must stay hidden until an explicit reveal — CodeRef always shows its value. For a whole structured object rather than a single id, use JsonViewer.
Usage
Do
- Use it for identifiers a user copies or clicks through — hashes, ids, addresses.
- Tune `chars` so both the head and tail of a hash stay recognizable.
- Set `href` for ids that resolve to an explorer or detail page.
- Pass a readable `children` label when the raw value is opaque.
Don't
- Don't use it for secrets — those need MaskedValue's explicit reveal.
- Don't put prose or multi-word labels in `full`; it's meant for a single token.
- Don't truncate so aggressively (`chars` too low) that ids collide visually.
- Don't wrap it in another link when you've already set `href`.
Accessibility
| Keys | Action |
|---|---|
| Tab | Focuses the chip (a button, or an anchor when href is set). |
| Enter / Space | Copies the full value (button) or follows the link (anchor). |
- The copy button carries an `aria-label` of `Copy <full>`, so the full value is announced even when the label is truncated.
- The full value is also mirrored into the `title` attribute for pointer hover.
- Copy silently no-ops where the Clipboard API is unavailable; the visible state simply won't flip to COPIED.
CodeRef props
| Prop | Type | Default | Description |
|---|---|---|---|
chars | number | 12 | Max characters to display; longer values are middle-truncated with an ellipsis. Defaults to `12`. Ignored when `children` is provided. |
children | ReactNode | — | Optional display override; when set it is shown verbatim (no truncation). |
className | string | — | |
full * | string | — | The full identifier — copied verbatim, and the basis for truncation. |
href | string | — | When set, renders an anchor to this href instead of a copy button. |
style | CSSProperties | — |