Å kopiere informasjon manuelt, som kodeutdrag, nettadresser eller tekstbiter, kan være både tidkrevende og feilutsatt. Dette gjelder særlig på mobile enheter der skjermen er liten. Ved å implementere en «kopier til utklippstavle»-funksjon, sparer man ikke bare verdifull tid, men reduserer også risikoen for feil og skrivefeil.
Konfigurere «Kopier til utklippstavle»-funksjonalitet
I en React-applikasjon kan du lage en ny komponent som du kaller `CopyButton`. Denne komponenten tar imot tekst som skal kopieres til utklippstavlen.
Hvis du ikke allerede har et React-prosjekt, kan du bruke `create-react-app` verktøyet til å opprette et.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Kopier</button>
)
}
export default CopyButton
Når brukeren trykker på knappen, skal funksjonen `copyToClipboard` kalles for å kopiere teksten til utklippstavlen.
For å implementere kopieringsfunksjonaliteten kan du enten bruke utklippstavlens API direkte eller benytte deg av en NPM-pakke.
Denne veiledningen viser hvordan du kan bruke begge metodene.
Bruke utklippstavle-API for å kopiere tekst i React
Utklippstavle APIet gir en mulighet for å samhandle med utklippstavlekommandoer som kopier, klipp ut og lim inn.
For å få tilgang til APIet, må du bruke `navigator.clipboard`-objektet som finnes i de fleste moderne nettlesere. Dette objektet har forskjellige metoder for å skrive til eller lese fra utklippstavlen.
For å skrive til utklippstavlen, bruker du `writeText`-metoden.
La oss se hvordan dette kan implementeres i `copyToClipboard`-funksjonen i `CopyButton`-komponenten.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Teksten er kopiert til utklippstavlen:', text);
} catch (error) {
alert('Feil ved kopiering til utklippstavlen:', error);
}
};
`writeText`-metoden tar teksten som skal kopieres til utklippstavlen som parameter. Denne metoden er asynkron, så du må bruke `await` før du fortsetter.
Hvis teksten blir kopiert til utklippstavlen, skal en suksessmelding vises, ellers skal en feilmelding vises i et varsel.
Sjekke nettlesertillatelser
Som en god praksis er det viktig å kontrollere at brukeren har gitt nettleseren tillatelse til å få tilgang til utklippstavlen. Du kan sjekke om brukeren har gitt tillatelse for skriving til utklippstavlen 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('Teksten er kopiert til utklippstavlen!');
} else {
throw new Error("Får ikke tilgang til utklippstavlen. Sjekk nettleserinnstillingene.")
}
} catch (error) {
alert('Feil ved kopiering til utklippstavlen:', error);
}
};
I den modifiserte funksjonen ovenfor vil teksten kun bli skrevet til utklippstavlen hvis brukeren har gitt tillatelse til dette. Hvis ikke, genereres det en feil.
Bruke en NPM-pakke for å kopiere til utklippstavlen i React
Hvis du ikke ønsker å bruke utklippstavle-API direkte, finnes det flere NPM-pakker du kan bruke. For React-applikasjoner kan du bruke pakken react-copy-to-clipboard. Denne pakken er populær med over 1 million ukentlige nedlastinger og er enkel å bruke.
Installer pakken i React-applikasjonen din ved å kjøre følgende kommando i terminalen:
npm install react-copy-to-clipboard
Etter installasjon, importerer du `CopyToClipboard`-komponenten fra `react-copy-to-clipboard` i `CopyButton`-komponenten.
import {CopyToClipboard} from 'react-copy-to-clipboard';
`CopyToClipboard`-komponenten tar teksten du vil kopiere som en egenskap. Den aksepterer også en underordnet komponent som utløser kopieringshandlingen når den klikkes.
For eksempel, bruk koden nedenfor for å kopiere til utklippstavlen med en knapp:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Kopier</button>
</CopyToClipboard>
Merk deg behandlingsfunksjonen `onCopy`. Denne funksjonen tar to argumenter: `text`, som er teksten som er kopiert, og `result`, som er en boolsk verdi som indikerer om kopieringen var vellykket eller ikke.
Hvorfor bruke en «kopier til utklippstavle»-funksjon?
Du har nå lært hvordan du kan bruke utklippstavle-APIet og `react-copy-to-clipboard`-pakken for å kopiere tekst til utklippstavlen i en React-applikasjon. Selv om brukere av applikasjonen din kan velge tekst manuelt og bruke nettleserens innebygde kopieringsfunksjon, er det mye enklere å bare trykke på en knapp for å kopiere tekst, noe som gir en bedre brukeropplevelse.