Clipboard API: Kopiér og indsæt i React

navigator.clipboard.writeText(text) skriver en streng til systemets udklipsholder og returnerer et Promise. Det er den moderne erstatning for den ældre tilgang med execCommand. Afvent altid Promiset med await, og håndter en mulig afvisning, f.eks. når brugeren afviser adgang til udklipsholderen.

navigator.clipboard.readText() læser det aktuelle indhold af udklipsholderen som en streng og returnerer også et Promise. Læsning kræver tilladelsen clipboard-read, som browseren beder brugeren om at give. I praksis bruges læsning fra udklipsholderen sjældnere end skrivning i typiske React-applikationer.

Browsere håndhæver, at clipboard.writeText kun kan kaldes i en handler for en brugerhandling, f.eks. en klik- eller keydown-hændelse. Hvis du kalder den i en useEffect eller asynkront efter brugerhandlingen, udløses en sikkerhedsfejl. Udløs altid skrivningen direkte fra en onClick-handler.

Det almindelige mønster er: Brugeren klikker på en kopieringsknap, din håndteringsfunktion kalder navigator.clipboard.writeText(value), ved succes sætter du tilstanden copied til true, og knappen viser midlertidigt et flueben eller etiketten "Kopieret!". Efter en kort forsinkelse vender knappen tilbage til sin normale tilstand.

Indkapsl logikken i et useCopyToClipboard-hook, der returnerer en tupel: [copied, copyFn]. Den boolske værdi copied styrer tilbagemeldingen i brugerfladen, og copyFn modtager den tekst, der skal kopieres. Hooket håndterer den asynkrone skrivning og eventuelle fejl internt, så komponenterne forbliver enkle.

Inde i hooket skal du efter en vellykket kopiering kalde setCopied(true) og planlægge en nulstilling med setTimeout(() => setCopied(false), 2000). Gem tidsudløbets id, og ryd det i oprydningen af en useEffect for at forhindre tilstandsopdateringer efter afmontering. Det undgår advarslen "kan ikke opdatere tilstanden på en afmonteret komponent".

Ældre browsere og sider uden HTTPS understøtter ikke Clipboard API'et. Det ældre alternativ opretter midlertidigt en textarea, angiver dens værdi, føjer den til body, kalder document.execCommand('copy') og fjerner elementet. Denne tilgang er synkron og virker overalt, selvom den er forældet.

Kontrollér følgende, før du bruger Clipboard API'et: navigator.clipboard && typeof navigator.clipboard.writeText === 'function'. Hvis det ikke er tilgængeligt, skal du bruge den ældre tilgang med execCommand som alternativ. Denne forebyggende kontrol forhindrer fejl under kørsel i miljøer, hvor API'et ikke understøttes.

Læsning fra udklipsholderen kræver brugertilladelse via Permissions API. Du kan forespørge om den aktuelle tilstand: navigator.permissions.query({ name: 'clipboard-read' }) returnerer en PermissionStatus med en state på granted, denied eller prompt. Browseren viser automatisk en tilladelsesdialog, når du kalder readText().

Clipboard API er kun tilgængeligt i sikre kontekster (HTTPS eller localhost). På HTTP-sider er navigator.clipboard undefined. Det er en sikkerhedsbegrænsning, fordi indholdet af udklipsholderen kan være følsomt. Kontrollér altid API'ets tilgængelighed, før du refererer til dets metoder, for at undgå nulreferencefejl.

jsdom (som bruges af Jest) implementerer ikke Clipboard API'et. Opret en mock af det i din testopsætning: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }). Det gør det muligt at teste, at din komponent kalder writeText med det korrekte argument uden et ægte browsermiljø.

Brug navigator.clipboard.writeText() i en klikhåndtering til at kopiere tekst. Opret en useCopyToClipboard-hook, der returnerer [copied, copyFn], og som nulstilles efter et bestemt tidsrum. Kontrollér altid, om API'et er tilgængeligt, tilbyd en reservefunktion med execCommand til ældre browsere, og opret en mock af navigator.clipboard i Jest-tests.