useClipboard Hook - Documentazione

[DEV-166] Documentazione migrata. L'hook useClipboard e la funzione copyToClipboard sono ora forniti da @elerama/ui. Questa documentazione è mantenuta solo come riferimento storico.

Per la documentazione aggiornata vedere lo Storybook di @elerama/ui → sezione Hooks/useClipboard.

Migrazione (DEV-166)

L'API è cambiata rispetto alla versione precedente interna a elerama-frontend:

Vecchia API	Nuova API
copy(text, context?)	copy(text) — parametro context rimosso
Logging via console.log/warn/error	Nessun logging interno — usare error: string | null dal return value

// Prima (deprecato)
import { useClipboard } from '@/hooks/utils/useClipboard';
const { copy } = useClipboard();
await copy('testo', 'MyComponent');

// Dopo
import { useClipboard } from '@elerama/ui';
const { copy, copied, error } = useClipboard();
await copy('testo');
if (error) console.error(error);

---

📚 Contenuti (storico)

CLIPBOARD_UTILITY.md

Guida originale — API obsoleta

Contiene:

• � Descrizione dell'hook
• 🎯 Caratteristiche e vantaggi
• � Esempi di utilizzo
• � Signature e parametri
• � Pattern pratici
• � Debug e troubleshooting

---

🎯 Quick Start

import { useClipboard } from "@/hooks/utils/useClipboard";

export function MyComponent() {
  const { copy, copied, error } = useClipboard();

  const handleCopy = async () => {
    await copy("Testo da copiare", "mio-componente");
  };

  return (
    <button onClick={handleCopy}>
      {copied ? "✅ Copiato!" : "📋 Copia"}
      {error && <span> - Errore: {error}</span>}
    </button>
  );
}

✨ Caratteristiche

✅ Hook React nativo - Integrazione perfetta con React ✅ Gestione dello stato - copied, error automatico ✅ Feedback visivo - Auto-reset dopo timeout ✅ Clipboard API moderna - HTTPS ready ✅ Fallback legacy - Supporto HTTP e browser vecchi ✅ Error handling - Gestione completa degli errori ✅ TypeScript - Full type safety

---

📖 Leggi di più

Consulta CLIPBOARD_UTILITY.md per una guida completa con tutti gli esempi e i dettagli tecnici.