Hur man lägger till en kopia till urklippsfunktionen i din React-app

Att manuellt kopiera information, vare sig det är kodavsnitt, URL-länkar eller textfragment, kan vara tidskrävande och felbenägen, särskilt på mobila enheter där skärmen är liten. Att lägga till en "kopiera till urklipp"-funktionalitet sparar inte bara tid utan minskar också risken för fel och stavfel.

Ställa in funktionen Kopiera till Urklipp

Skapa en ny komponent med namnet i en React-app CopyButton. Den här komponenten accepterar text som den ska kopiera till urklipp.

Om du inte har ett React-projekt att arbeta med, använd verktyget create react app att bygga en.

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

När den klickas ska knappen anropa en funktion som heter copyToClipboard som kopierar texten till urklipp.

För att implementera kopieringsfunktionen kan du använda Urklipps API direkt eller använda ett NPM-paket.

Den här guiden visar hur du använder båda.

Använda Clipboard API för att kopiera text till ett Urklipp i React

De Urklipp API ger ett sätt att interagera med urklippskommandon som kopiera, klipp ut och klistra in.

För att komma åt den måste du använda navigator.klippbord objekt tillgängligt i de flesta moderna webbläsare. Den har flera metoder som låter dig skriva eller läsa innehållet i klippbordet.

För att skriva till urklipp, använd skrivText metod.

Låt oss se hur man implementerar detta i copyToClipboard funktion av 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 skrivText metoden accepterar texten som den kommer att kopiera till urklipp. Denna metod är asynkron, så du måste använda nyckelordet await innan du går vidare.

Om texten kopieras till urklipp, visa ett framgångsrikt meddelande, annars visas felmeddelandet som en varning.

Kontrollera webbläsarbehörigheter

Som god praxis är det viktigt att se till att användaren har gett webbläsaren behörighet att komma åt urklippet. Du kan kontrollera om användaren har beviljat urklipp-skriv tillstånd med hjälp av navigator.behörigheter Webb-API innan du kopierar till urklipp som visas nedan.

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 modifierade funktionen ovan, bara när användaren har gett tillåtelse att skriva till urklippet skriver till den. Annars ger funktionen ett fel.

Använda ett NPM-paket för att kopiera till Urklipp i React

Om du inte vill använda urklipps-API: et direkt finns det flera NPM-paket du kan använda istället. För reaktionsapplikationer kan du använda reagera-kopiera-till-urklipp paket. Det är ganska populärt med mer än 1 miljon hämtningar per vecka och är också lätt att använda.

Installera det i din React-applikation genom att köra följande kommando i terminalen:

npm install react-copy-to-clipboard

När du har installerat, importera CopyToClipboard komponent från reagera-kopiera-till-urklipp in i CopyButton komponent.

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

De CopyToClipboard komponent accepterar texten du vill kopiera som en rekvisita. Den accepterar också en underordnad komponent som när den klickas utlöser kopieringsåtgärden.

Använd till exempel koden nedan för att kopiera till urklipp med en knapp:

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

Notera hanterarfunktionen, onCopy. Den accepterar två argument, text och resultat där text är den kopierade texten och resultatet är ett booleskt värde som indikerar om kopieringsåtgärden lyckades eller inte.

Varför använda en Kopiera till Urklipp-funktion?

Du har lärt dig hur du använder urklipps-API och paketet react-copy-to-clipboard för att kopiera text till urklipp i en React-applikation. Medan användarna av din applikation helt enkelt kan välja texten och använda kopieringsfunktionen i din webbläsare, är det enklare och bättre för användarupplevelsen att klicka för att kopiera text.