Clipboard

Utilities and patterns for copy-to-clipboard functionality in Ledger UI applications.

useClipboard Hook

A simple hook for copying text to the clipboard:

import { useState, useCallback } from 'react';
 
function useClipboard(timeout = 2000) {
  const [copied, setCopied] = useState(false);
 
  const copy = useCallback(async (text: string) => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), timeout);
  }, [timeout]);
 
  return { copy, copied };
}

Usage with Button

import { Button, Tooltip, toast } from '@gtcx/ui';
 
function CopyButton({ text }: { text: string }) {
  const { copy, copied } = useClipboard();
 
  return (
    <Tooltip title={copied ? 'Copied!' : 'Copy to clipboard'}>
      <Button
        size="small"
        variant="outline"
        onClick={() => {
          copy(text);
          toast.success('Copied to clipboard');
        }}
      >
        {copied ? 'Copied' : 'Copy'}
      </Button>
    </Tooltip>
  );
}

Common Patterns

Copy API Key / Token

<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
  <Input value={apiKey} readOnly style={{ fontFamily: 'monospace' }} />
  <CopyButton text={apiKey} />
</div>

Copy Table Cell

In AdvancedTable, add a copy action to row context menus:

const columns = [
  {
    title: 'Reference ID',
    dataIndex: 'refId',
    render: (text) => (
      <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        {text}
        <CopyButton text={text} />
      </span>
    ),
  },
];

Accessibility

Copy buttons should have clear labels (aria-label="Copy reference ID")
Success feedback should be announced to screen readers (use toast or aria-live region)
Provide visual confirmation (icon change, tooltip text change) alongside the announcement

Upload Overview