Clipboard API: kopiere og lime inn i React

navigator.clipboard.writeText(text) skriver en tekststreng til systemets utklippstavle og returnerer et Promise. Det er den moderne erstatningen for den eldre execCommand-metoden. Bruk alltid await på Promiset, og håndter mulig avvisning, for eksempel når brukeren nekter tilgang til utklippstavlen.

navigator.clipboard.readText() leser det gjeldende innholdet på utklippstavlen som en tekststreng og returnerer også et Promise. Lesing krever tillatelsen clipboard-read, som nettleseren ber brukeren om å gi. I praksis brukes lesing fra utklippstavlen sjeldnere enn skriving i typiske React-applikasjoner.

Nettlesere håndhever at clipboard.writeText bare kan kalles i en håndterer for en brukerhandling, for eksempel en klikk- eller keydown-hendelse. Hvis du kaller den i en useEffect eller asynkront etter brukerhandlingen, utløses en sikkerhetsfeil. Utløs alltid skrivingen direkte fra en onClick-håndterer.

Det vanlige mønsteret er: Brukeren klikker på en kopieringsknapp, håndtereren kaller navigator.clipboard.writeText(value), og ved vellykket kopiering setter du tilstanden copied til true. Knappen viser midlertidig et hakemerke eller teksten "Kopiert!". Etter en kort forsinkelse går knappen tilbake til normaltilstanden.

Kapsle inn logikken i en useCopyToClipboard-hook som returnerer en tuppel: [copied, copyFn]. Boolskverdien copied styrer tilbakemeldingen i brukergrensesnittet, og copyFn tar imot teksten som skal kopieres. Hooken håndterer den asynkrone skrivingen og eventuelle feil internt, slik at komponentene forblir enkle.

Inne i hooken setter du setCopied(true) etter en vellykket kopiering og planlegger en tilbakestilling med setTimeout(() => setCopied(false), 2000). Lagre tidsavbrudds-ID-en og fjern den i en useEffect-opprydding for å hindre tilstandsoppdateringer etter avmontering. Dette unngår advarselen "kan ikke oppdatere tilstanden på en avmontert komponent".

Eldre nettlesere og sider som ikke bruker HTTPS, støtter ikke Clipboard API. Den eldre reserveløsningen oppretter et midlertidig textarea, angir verdien, legger det til i body, kaller document.execCommand('copy') og fjerner elementet. Denne metoden er synkron og fungerer overalt, men den er foreldet.

Før du bruker Clipboard API, kontrollerer du: navigator.clipboard && typeof navigator.clipboard.writeText === 'function'. Hvis API-et ikke er tilgjengelig, bruker du den eldre execCommand-metoden som reserve. Denne defensive kontrollen hindrer kjøretidsfeil i miljøer som ikke støtter API-et.

Lesing fra utklippstavlen krever brukertillatelse via Permissions API. Du kan spørre etter gjeldende status: navigator.permissions.query({ name: 'clipboard-read' }) returnerer en PermissionStatus med en state som er granted, denied eller prompt. Nettleseren ber automatisk om tillatelse når du kaller readText().

Clipboard API er bare tilgjengelig i sikre kontekster, altså HTTPS eller localhost. På HTTP-sider er navigator.clipboard undefined. Dette er en sikkerhetsbegrensning fordi innholdet på utklippstavlen kan være sensitivt. Kontroller alltid at API-et er tilgjengelig før du refererer til metodene, for å unngå nullreferansefeil.

jsdom (som brukes av Jest) implementerer ikke Clipboard API. Simuler det i testoppsettet: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }). Da kan De teste at komponenten kaller writeText med riktig argument uten et ekte nettlesermiljø.

Bruk navigator.clipboard.writeText() i en klikkbehandler for å kopiere tekst. Lag en useCopyToClipboard-hook som returnerer [copied, copyFn], med en tidsstyrt tilbakestilling. Sjekk alltid om API-et er tilgjengelig, tilby en execCommand-reserve for eldre nettlesere, og simuler navigator.clipboard i Jest-tester.