Hvordan legge til kopi til utklippstavle-funksjonen i React-appen din

Manuell kopiering av informasjon, det være seg kodebiter, URL-lenker eller tekstfragmenter, kan være tidkrevende og utsatt for feil, spesielt på mobile enheter der skjermen er liten. Å legge til en "kopi til utklippstavle"-funksjonalitet sparer ikke bare tid, men reduserer også potensialet for feil og skrivefeil.

Sette opp funksjonaliteten Kopier til utklippstavlen

I en React-app oppretter du en ny komponent med navnet CopyButton. Denne komponenten godtar tekst som den skal kopiere til utklippstavlen.

Hvis du ikke har et React-prosjekt å jobbe med, bruk create react app-verktøyet å stillas en.

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

Når du klikker på knappen, skal den kalle opp en funksjon kopiere til utklippstavle som kopierer teksten til utklippstavlen.

For å implementere kopifunksjonaliteten kan du bruke utklippstavlens API direkte eller bruke en NPM-pakke.

Denne veiledningen viser deg hvordan du bruker begge.

Bruke Clipboard API for å kopiere tekst til en utklippstavle i React

De Utklippstavle API gir en måte å samhandle med utklippstavlekommandoer som kopier, klipp ut og lim inn.

For å få tilgang til den, må du bruke navigator.klippstavle objekt tilgjengelig i de fleste moderne nettlesere. Den har flere metoder som lar deg skrive eller lese innholdet på utklippstavlen.

For å skrive til utklippstavlen, bruk skriv tekst metode.

La oss se hvordan du implementerer dette i kopiere til utklippstavle funksjonen til 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);
 }
 };

De skriv tekst metoden godtar teksten som den vil kopiere til utklippstavlen. Denne metoden er asynkron, så du må bruke vent nøkkelordet før du går videre.

Hvis teksten er kopiert til utklippstavlen, vis en suksessmelding ellers vis feilmeldingen som et varsel.

Sjekker nettlesertillatelser

Som god praksis er det viktig å sikre at brukeren har gitt nettleseren tillatelse til å få tilgang til utklippstavlen. Du kan sjekke om brukeren har innvilget utklippstavle-skriv tillatelse ved å bruke navigator.tillatelser Web API før du kopierer til utklippstavlen 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 modifiserte funksjonen ovenfor, bare når brukeren har gitt tillatelse til å skrive til utklippstavlen, skriver han til den. Ellers gir funksjonen en feil.

Bruke en NPM-pakke for å kopiere til utklippstavlen i React

Hvis du ikke vil bruke utklippstavlens API direkte, finnes det flere NPM-pakker du kan bruke i stedet. For reaksjonsapplikasjoner kan du bruke reager-kopi-til-utklippstavle pakke. Det er ganske populært med mer enn 1 million ukentlige nedlastinger og er også enkelt å bruke.

Installer den i React-applikasjonen din ved å kjøre følgende kommando i terminalen:

npm install react-copy-to-clipboard

Når den er installert, importerer du Kopiere til utklippstavle komponent fra reager-kopi-til-utklippstavle inn i det CopyButton komponent.

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

De Kopiere til utklippstavle komponent godtar teksten du vil kopiere som en rekvisitt. Den godtar også en underordnet komponent som utløser kopieringshandlingen når den klikkes.

Bruk for eksempel koden nedenfor for å kopiere til utklippstavlen med en knapp:

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

Legg merke til behandlerfunksjonen, onCopy. Den godtar to argumenter, tekst og resultat der tekst er den kopierte teksten og resultatet er en boolsk verdi som indikerer om kopieringshandlingen var vellykket eller ikke.

Hvorfor bruke en kopi til utklippstavle-funksjonen?

Du har lært hvordan du bruker utklippstavlens API og react-copy-to-clipboard-pakken for å kopiere tekst til utklippstavlen i en React-applikasjon. Mens brukerne av applikasjonen din ganske enkelt kan velge teksten og bruke kopieringsfunksjonen til nettleseren din, er det enklere å klikke for å kopiere tekst og bedre for brukeropplevelsen.