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

Manuell kopiering av informasjon, det være seg kodebiter, URL-koblinger 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 kalt CopyButton. Denne komponenten godtar tekst som den skal kopiere til utklippstavlen.

Hvis du ikke har et React-prosjekt å jobbe med, bruk verktøyet create react-appen til å stillasere et.

 function CopyButton({text}) {
    const copyToClipboard = () => {
        
    }
  return (
    <button onClick={copyToClipboard}>Copy</button>
  )
}
export default CopyButton
 

Når den klikkes, skal knappen kalle en funksjon kalt copyToClipboard 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 det, må du bruke navigator.clipboard-objektet som er tilgjengelig i de fleste moderne nettlesere. Den har flere metoder som lar deg skrive eller lese innholdet på utklippstavlen.

For å skrive til utklippstavlen, bruk writeText-metoden.

La oss se hvordan du implementerer dette i copyToClipboard-funksjonen til CopyButton-komponenten.

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

WriteText-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 gitt utklippstavle-skrivetillatelse ved å bruke navigator.permissions 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 {
            throw new Error("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, er 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 CopyToClipboard-komponenten fra react-copy-to-clipboard til CopyButton-komponenten.

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

CopyToClipboard-komponenten 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:

 <CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
   <button>Copy</button>
</CopyToClipboard>

Legg merke til behandlerfunksjonen, onCopy. Den aksepterer 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.