Manuální přepisování informací, ať už se jedná o úryvky kódu, webové adresy nebo části textu, může být zdlouhavé a náchylné k chybám, obzvláště na mobilních zařízeních s menšími obrazovkami. Implementace funkce „kopírovat do schránky“ nejenže šetří čas, ale také minimalizuje možnost vzniku chyb a překlepů.
Konfigurace funkce kopírování do schránky
V rámci aplikace React vytvořte nový komponent s názvem CopyButton. Tento komponent bude přebírat text, který se má zkopírovat do schránky.
Pokud nemáte k dispozici žádný projekt React, využijte nástroj pro vytvoření aplikace React a vytvořte si jej.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Kopírovat</button>
)
}export default CopyButton
Po kliknutí by tlačítko mělo aktivovat funkci s názvem copyToClipboard, která zajistí zkopírování textu do schránky.
Pro realizaci funkce kopírování je možné přímo použít API rozhraní schránky, nebo využít některý z NPM balíčků.
Tento návod vám ukáže, jak používat obě možnosti.
Využití Clipboard API pro kopírování textu do schránky v Reactu
Rozhraní API schránky nabízí možnost interakce s příkazy schránky, jako je kopírování, vyjímání a vkládání.
Pro přístup k němu je nutné využít objekt navigator.clipboard, který je dostupný ve většině moderních prohlížečů. Tento objekt disponuje několika metodami, které umožňují zápis i čtení obsahu schránky.
Pro účely zápisu do schránky se využívá metoda writeText.
Podívejme se, jak implementovat tuto funkci v rámci funkce copyToClipboard komponentu CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text byl zkopírován do schránky:', text);
} catch (error) {
alert('Chyba při kopírování do schránky:', error);
}
};
Metoda writeText přijímá text, který má být zkopírován do schránky. Protože se jedná o asynchronní metodu, je nezbytné před jejím spuštěním použít klíčové slovo await.
V případě úspěšného zkopírování textu do schránky se zobrazí upozornění o úspěchu, v opačném případě se zobrazí chybové hlášení formou upozornění.
Ověření oprávnění prohlížeče
Z hlediska správného postupu je klíčové zajistit, aby uživatel udělil prohlížeči oprávnění pro přístup ke schránce. Je tedy vhodné, před samotným kopírováním do schránky ověřit, zda uživatel poskytl souhlas se zápisem do schránky, a to pomocí webového rozhraní API navigator.permissions, jak je znázorněno níže.
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 byl zkopírován do schránky!');
} else {
throw new Error("Nelze přistupovat ke schránce. Zkontrolujte prosím oprávnění prohlížeče.")
}
} catch (error) {
alert('Chyba při kopírování do schránky:', error);
}
};
V upravené verzi funkce dojde k zápisu do schránky pouze za předpokladu, že uživatel udělil potřebné oprávnění k zápisu. V opačném případě funkce vyvolá chybu.
Použití NPM balíčku pro kopírování do schránky v Reactu
Pokud se nechcete přímo zabývat rozhraním API schránky, je možné využít některý z NPM balíčků. Pro aplikace React můžete využít balíček react-copy-to-clipboard. Tento balíček je velice populární, má více než milion stažení týdně a je jednoduchý na použití.
Pro instalaci do vašeho projektu React spusťte následující příkaz v terminálu:
npm install react-copy-to-clipboard
Po dokončení instalace importujte komponentu CopyToClipboard z modulu react-copy-to-clipboard do vašeho komponentu CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Komponenta CopyToClipboard přebírá text, který se má zkopírovat, jako vlastnost. Dále přijímá podřízený komponent, který po kliknutí vyvolá akci kopírování.
Níže uvedený kód například umožňuje zkopírovat text do schránky pomocí tlačítka:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Kopírovat</button>
</CopyToClipboard>
Všimněte si obslužné funkce onCopy. Přijímá dva parametry, text a výsledek, kde text představuje zkopírovaný text a výsledek je logická hodnota, která indikuje, zda byla akce kopírování úspěšná či nikoliv.
Proč používat funkci kopírování do schránky?
Naučili jste se, jak lze využít rozhraní API schránky i balíček React-Copy-to-Clipboard pro kopírování textu do schránky v aplikaci React. Ačkoliv uživatelé vaší aplikace mohou běžně vybrat text a použít funkci kopírování prohlížeče, přímé kliknutí pro zkopírování textu je uživatelsky příjemnější a efektivnější.