Sådan tilføjer du kopi til udklipsholder-funktionen til din React-app

Manuel kopiering af oplysninger, det være sig kodestykker, URL-links eller tekstfragmenter, kan være tidskrævende og fejlbehæftet, især på mobile enheder, hvor skærmen er lille. Tilføjelse af en "kopi til udklipsholder"-funktionalitet sparer ikke kun tid, men reducerer også risikoen for fejl og slåfejl.

Opsætning af funktionen Kopier til udklipsholder

I en React-app skal du oprette en ny komponent med navnet CopyButton. Denne komponent accepterer tekst, som den skal kopiere til udklipsholderen.

Hvis du ikke har et React-projekt at arbejde på, brug værktøjet create react app at stilladsere en.

functionCopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
 }
return (
Copy</button>
 )
}
exportdefault CopyButton

Når der klikkes på knappen, skal knappen kalde en funktion med navnet Kopier til udklipsholder der kopierer teksten til udklipsholderen.

For at implementere kopifunktionaliteten kan du bruge clipboard API direkte eller bruge en NPM-pakke.

Denne vejledning viser dig, hvordan du bruger begge dele.

Brug af Clipboard API til at kopiere tekst til et Clipboard i React

Det Udklipsholder API giver en måde at interagere med udklipsholderkommandoer såsom kopier, klip og indsæt.

For at få adgang til det skal du bruge navigator.klippebord objekt tilgængeligt i de fleste moderne browsere. Det har flere metoder, der giver dig mulighed for at skrive eller læse indholdet af udklipsholderen.

For at skrive til udklipsholderen skal du bruge skriv tekst metode.

Lad os se, hvordan du implementerer dette i Kopier til udklipsholder funktion af CopyButton komponent.

const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
 alert('Text copied to clipboard:', text);
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
 };

Det skriv tekst metoden accepterer teksten, som den vil kopiere til udklipsholderen. Denne metode er asynkron, så du skal bruge await nøgleordet, før du går videre.

Hvis teksten kopieres til udklipsholderen, skal du vise en succesmeddelelse ellers vise fejlmeddelelsen som en advarsel.

Kontrol af browsertilladelser

Som god praksis er det vigtigt at sikre, at brugeren har givet browseren tilladelse til at få adgang til udklipsholderen. Du kan tjekke, om brugeren har givet udklipsholder-skriv tilladelse ved at bruge navigator.tilladelser Web API før kopiering til udklipsholderen som vist nedenfor.

const copyToClipboard = async () => {
try {
const permissions = await navigator.permissions.query({name: "clipboard-write"})
if (permissions.state "granted" || permissions.state "prompt") {
await navigator.clipboard.writeText(text);
 alert('Text copied to clipboard!');
 } else {
thrownewError("Can't access the clipboard. Check your browser permissions.")
 }
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
};

I den ændrede funktion ovenfor, kun når brugeren har givet tilladelse til at skrive til udklipsholderen, skriver den til den. Ellers giver funktionen en fejl.

Brug af en NPM-pakke til at kopiere til udklipsholder i React

Hvis du ikke vil bruge udklipsholderens API direkte, er der flere NPM-pakker du kan bruge i stedet. Til reaktionsapplikationer kan du bruge reagere-kopi-til-udklipsholder pakke. Det er ret populært med mere end 1 million ugentlige downloads og er også nemt at bruge.

Installer det i din React-applikation ved at køre følgende kommando i terminalen:

npm install react-copy-to-clipboard

Når det er installeret, skal du importere Kopier til udklipsholder komponent fra reagere-kopi-til-udklipsholder ind i CopyButton komponent.

import {CopyToClipboard} from'react-copy-to-clipboard';

Det Kopier til udklipsholder komponent accepterer den tekst, du vil kopiere, som en rekvisit. Den accepterer også en underordnet komponent, der udløser kopieringshandlingen, når den klikkes.

Brug for eksempel koden nedenfor til at kopiere til udklipsholderen med en knap:

console.log(result)}>
Copy</button>
</CopyToClipboard>

Bemærk håndteringsfunktionen, onCopy. Den accepterer to argumenter, tekst og resultat hvor tekst er den kopierede tekst, og resultatet er en boolsk værdi, der angiver, om kopieringshandlingen var vellykket eller ej.

Hvorfor bruge en kopi til udklipsholder-funktion?

Du har lært, hvordan du bruger udklipsholder-API'en og react-copy-to-clipboard-pakken til at kopiere tekst til udklipsholderen i en React-applikation. Mens brugerne af din applikation blot kan vælge teksten og bruge kopifunktionen i din browser, er det mere ligetil og bedre for brugeroplevelsen at klikke for at kopiere tekst.