Clipboard API: kopiëren en plakken in React

navigator.clipboard.writeText(text) schrijft een tekenreeks naar het systeemklembord en geeft een Promise terug. Dit is de moderne vervanging voor de verouderde aanpak met execCommand. Wacht altijd met await op de Promise en handel een mogelijke afwijzing af, bijvoorbeeld wanneer de gebruiker toegang tot het klembord weigert.

navigator.clipboard.readText() leest de huidige inhoud van het klembord als tekenreeks en geeft ook een Promise terug. Voor lezen is de toestemming clipboard-read vereist; de browser vraagt de gebruiker deze te verlenen. In de praktijk wordt lezen van het klembord in typische React-applicaties minder vaak gebruikt dan schrijven.

Browsers staan toe dat clipboard.writeText alleen binnen een handler voor een gebruikersactie wordt aangeroepen, zoals bij een click- of keydown-gebeurtenis. Als je de functie in een useEffect aanroept of na de actie asynchroon uitvoert, ontstaat er een beveiligingsfout. Start het schrijven altijd rechtstreeks vanuit een onClick-handler.

Het standaardpatroon is: de gebruiker klikt op een kopieerknop, je handler roept navigator.clipboard.writeText(value) aan, bij succes stel je de status copied in op true en toont de knop tijdelijk een vinkje of het label "Gekopieerd!". Na een korte vertraging keert de knop terug naar de normale toestand.

Breng de logica onder in een useCopyToClipboard-hook die een tupel teruggeeft: [copied, copyFn]. De booleaanse waarde copied stuurt de feedback in de gebruikersinterface aan en copyFn accepteert de te kopiëren tekst. De hook handelt het asynchrone schrijven en eventuele fouten intern af, zodat componenten eenvoudig blijven.

Stel in de hook na een geslaagde kopieeractie setCopied(true) in en plan een reset met setTimeout(() => setCopied(false), 2000). Bewaar de time-out-id en wis die in een opruimfunctie van useEffect om statusupdates na het ontkoppelen te voorkomen. Zo vermijd je de waarschuwing "kan de status van een ontkoppelde component niet bijwerken".

Oudere browsers en pagina's zonder HTTPS ondersteunen de Clipboard API niet. De verouderde terugvaloptie maakt een tijdelijk textarea, stelt de waarde ervan in, voegt het toe aan de body, roept document.execCommand('copy') aan en verwijdert het element. Deze aanpak is synchroon en werkt overal, maar is verouderd.

Controleer dit voordat je de Clipboard API gebruikt: navigator.clipboard && typeof navigator.clipboard.writeText === 'function'. Als de API niet beschikbaar is, val je terug op de verouderde aanpak met execCommand. Deze defensieve controle voorkomt fouten tijdens de uitvoering in omgevingen waarin de API niet wordt ondersteund.

Voor het lezen van het klembord is toestemming via de Permissions API vereist. Je kunt de huidige status opvragen: navigator.permissions.query({ name: 'clipboard-read' }) geeft een PermissionStatus terug met een state van granted, denied of prompt. De browser vraagt automatisch om toestemming wanneer je readText() aanroept.

De Clipboard API is alleen beschikbaar in beveiligde contexten (HTTPS of localhost). Op HTTP-pagina's is navigator.clipboard undefined. Dit is een beveiligingsbeperking, omdat klembordinhoud gevoelig kan zijn. Controleer altijd of de API beschikbaar is voordat je naar de methoden ervan verwijst, om nullverwijzingsfouten te voorkomen.

jsdom (gebruikt door Jest) implementeert de Clipboard API niet. Simuleer deze in je testconfiguratie: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }). Zo kun je testen of je component writeText aanroept met het juiste argument, zonder een echte browseromgeving.

Gebruik navigator.clipboard.writeText() in een klikhandler om tekst te kopiëren. Bouw een useCopyToClipboard-hook die [copied, copyFn] retourneert en zichzelf na een bepaalde tijd reset. Controleer altijd of de API beschikbaar is, bied een execCommand-terugvaloptie voor oudere browsers en simuleer navigator.clipboard in Jest-tests.