Copy is an interaction. Treat it like one.

import { CopyField } from 'react-smart-copy';

export function ContactRow() {
  return (
    <CopyField.Root value="shubh@example.com" label="Email" className="group row">
      <CopyField.Label />
      <CopyField.Value />
      <CopyField.Trigger className="opacity-0 group-data-[revealed]:opacity-100 focus-visible:opacity-100" />
    </CopyField.Root>
  );
}

import { useCopy, useDisplayStatus } from 'react-smart-copy';

function InvoiceNumber({ id }: { id: string }) {
  const { copy, status } = useCopy();
  const shown = useDisplayStatus(status);

  return (
    <button type="button" onClick={() => void copy(id)}>
      {shown === 'copied' ? 'Copied' : 'Copy'}
    </button>
  );
}

import { usePaste } from 'react-smart-copy';

function PasteZone() {
  const { paste, targetProps, status, result } = usePaste({
    accept: ['text/plain', 'image/png'],
  });

  return (
    <>
      <button type="button" onClick={paste}>
        {status === 'reading' ? 'Reading…' : 'Paste'}
      </button>
      <textarea {...targetProps} placeholder="Or Ctrl+V here" />
      {result?.text && <pre>{result.text}</pre>}
    </>
  );
}

import { CopyGroup, CopyField } from 'react-smart-copy';

function ContactCard({ contact }) {
  return (
    <CopyGroup>
      <CopyField.Root value={contact.name}  label="Name"  ><CopyField.Trigger /></CopyField.Root>
      <CopyField.Root value={contact.email} label="Email" ><CopyField.Trigger /></CopyField.Root>
      <CopyField.Root value={contact.phone} label="Phone" ><CopyField.Trigger /></CopyField.Root>
    </CopyGroup>
  );
}

import { svgToPngBlob, captureImage } from 'react-smart-copy/capture';
import { useCopy } from 'react-smart-copy';

// SVG element → PNG blob (no rasteriser needed):
const blob = await svgToPngBlob(svgRef.current);

// DOM element → image (bring your own rasteriser):
const { copy } = captureImage(
  () => divRef.current,
  { rasterize: (el) => html2canvas(el).then(c => c.toDataURL()) }
);

copy('PLT-29018');
copy({ kind: 'html', html: '<b>INV-29018</b>', text: 'INV-29018' });
copy({ kind: 'json', value: customer, pretty: true });
copy({ kind: 'image', blob: () => chartToPngBlob() }); // runs inside the click
copy(() => editor.getValue());                          // read at click time