Att manuellt överföra information, som exempelvis kodsnuttar, webbadresser eller textstycken, kan vara både tidskrävande och leda till misstag, särskilt på mindre skärmar som mobiltelefoner. Genom att integrera en ”kopiera till urklipp”-funktion sparar man inte bara tid, utan minskar även risken för fel och stavfel.
Skapa en Kopiera till Urklipp-funktion
Vi börjar med att skapa en ny komponent, som vi kan kalla CopyButton, i en React-app. Denna komponent tar emot text som inmatning, vilken sedan ska kopieras till urklippet.
Om du inte redan har ett React-projekt att arbeta med, kan du använda `create-react-app` för att generera ett.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Kopiera</button>
)
}export default CopyButton
När man klickar på knappen ska en funktion vid namn `copyToClipboard` aktiveras, vilken i sin tur ser till att texten hamnar i urklippet.
För att implementera själva kopieringsfunktionen finns det två vägar att gå: antingen använda Urklipps-API:et direkt, eller ta hjälp av ett NPM-paket.
I denna handledning går vi igenom båda alternativen.
Kopiera text med Urklipps-API:et i React
Urklipps-API:et ger oss möjlighet att interagera med urklippsfunktioner såsom kopiera, klippa ut och klistra in.
För att använda det behöver vi objektet `navigator.clipboard`, vilket finns tillgängligt i de flesta moderna webbläsare. Det innehåller ett antal metoder för att läsa och skriva till urklippet.
För att skriva till urklippet använder vi metoden `writeText`.
Låt oss se hur vi kan implementera detta i funktionen `copyToClipboard` i vår komponent CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Texten kopierades till urklipp:', text);
} catch (error) {
alert('Ett fel uppstod vid kopiering:', error);
}
};
Metoden `writeText` tar texten som argument och kopierar den till urklippet. Denna metod är asynkron, så vi måste använda `await` innan vi går vidare.
Om texten kopieras framgångsrikt visar vi ett meddelande om detta, annars visas ett felmeddelande.
Kontroll av webbläsarens behörigheter
Som god praxis bör man alltid kontrollera att användaren har gett webbläsaren tillåtelse att komma åt urklippet. Det kan vi göra med hjälp av `navigator.permissions` webb-API, innan vi försöker kopiera texten.
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('Texten har kopierats!');
} else {
throw new Error("Åtkomst till urklipp nekas. Kontrollera webbläsarens behörigheter.")
}
} catch (error) {
alert('Ett fel uppstod vid kopiering:', error);
}
};
I den uppdaterade funktionen kopieras texten endast om användaren har gett tillåtelse att skriva till urklippet. Annars returneras ett felmeddelande.
Använda ett NPM-paket för att kopiera till Urklipp
Om du inte vill arbeta direkt med Urklipps-API:et finns det ett antal NPM-paket som du kan använda istället. För React-applikationer kan du exempelvis använda paketet react-copy-to-clipboard. Det är ett populärt val med över 1 miljon nedladdningar i veckan, och det är dessutom mycket enkelt att använda.
Installera paketet i ditt React-projekt genom att köra följande kommando i terminalen:
npm install react-copy-to-clipboard
Efter installationen importerar du komponenten `CopyToClipboard` från `react-copy-to-clipboard` till din CopyButton-komponent.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Komponenten `CopyToClipboard` tar emot texten som ska kopieras som en rekvisita. Den behöver även en underordnad komponent som, när den klickas på, utlöser kopieringsåtgärden.
Här är ett exempel på hur man använder en knapp för att kopiera text till urklipp:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Kopiera</button>
</CopyToClipboard>
Lägg märke till hanteringsfunktionen, `onCopy`. Den tar emot två argument: `text`, som är den kopierade texten, och `result`, som är ett booleskt värde som indikerar om kopieringsåtgärden lyckades eller inte.
Varför ska man använda en ”Kopiera till Urklipp”-funktion?
Du har nu sett hur man använder Urklipps-API:et och paketet `react-copy-to-clipboard` för att kopiera text i en React-app. Även om användare kan markera texten och använda webbläsarens inbyggda kopieringsfunktion, är det betydligt smidigare och mer användarvänligt med en särskild knapp för att kopiera text.