Component

CopyEcho

It listens to the browser's real copy event, adds one visible replica of the label, and settles after three copies with an unnecessarily official shadow. The label is changed in the DOM, not merely counted, while the original clipboard action still works normally.

Possible use

It could be used to make a reviewer copy a release status three times before a handoff, or to let a tiny clipboard-friendly label visibly accumulate an audit trail.

Reasonable alternative

A reasonable local alternative is a read-only input with one onCopy handler and a small array rendered beside it. Publishing that ceremony as a reusable component remains difficult to defend.

01 / Preview

Try it yourself.

The copies will stay here

Select the label and press Ctrl/Cmd+C.

Select the label, copy it three times, and watch the component keep the evidence.

Mechanism

1: Focus the read-only label and select its text.
2: Press Ctrl+C or Cmd+C; the browser still copies the value normally.
3: Each copy adds a permanent visible echo underneath the source.
4: After three copies, the source receives an official shadow for no useful reason.

02 / Usage

Put it somewhere.

example.tsxTSX

import { CopyEcho } from "gra-ui";
import "gra-ui/styles.css";

export function OverDocumentedLabel() {
  return <CopyEcho label="Ready for review" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe read-only text users select and copy to create visible echoes.