Jak přidat funkci kopírování do schránky do vaší aplikace React

Ruční kopírování informací, ať už jde o úryvky kódu, odkazy URL nebo fragmenty textu, může být časově náročné a náchylné k chybám, zejména na mobilních zařízeních s malou obrazovkou. Přidání funkce „kopírovat do schránky“ nejen šetří čas, ale také snižuje možnost chyb a překlepů.

Nastavení funkce kopírování do schránky

V aplikaci React vytvořte novou komponentu s názvem CopyButton. Tato komponenta přijímá text, který má zkopírovat do schránky.

Pokud nemáte projekt React, na kterém byste mohli pracovat, použijte nástroj pro vytvoření reakce na lešení jednoho.

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

Po kliknutí by tlačítko mělo volat funkci s názvem zkopírovat do schránky který zkopíruje text do schránky.

Chcete-li implementovat funkci kopírování, můžete přímo použít rozhraní API schránky nebo použít balíček NPM.

Tato příručka vám ukáže, jak používat obojí.

Použití Clipboard API ke kopírování textu do schránky v Reactu

The API schránky poskytuje způsob interakce s příkazy schránky, jako je kopírování, vyjímání a vkládání.

Chcete-li se k němu dostat, musíte použít navigátor.schránka objekt dostupný ve většině moderních prohlížečů. Má několik metod, které umožňují zapisovat nebo číst obsah schránky.

Chcete-li zapisovat do schránky, použijte psátText metoda.

Podívejme se, jak to implementovat v zkopírovat do schránky funkce 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);
 }
 };

The psátText metoda přijímá text, který zkopíruje do schránky. Tato metoda je asynchronní, takže před pokračováním musíte použít klíčové slovo wait.

Pokud je text zkopírován do schránky, zobrazte zprávu o úspěchu, jinak zobrazte chybovou zprávu jako upozornění.

Kontrola oprávnění prohlížeče

Jako správný postup je důležité zajistit, aby uživatel udělil prohlížeči oprávnění k přístupu do schránky. Můžete zkontrolovat, zda uživatel povolil schránka-psát povolení pomocí navigátor.oprávnění Web API před zkopírováním do schránky, 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 copied to clipboard!');
 } else {
thrownewError("Can't access the clipboard. Check your browser permissions.")
 }
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
};

V upravené funkci výše se do schránky zapisuje pouze v případě, že uživatel udělil oprávnění k zápisu. V opačném případě funkce vyvolá chybu.

Použití balíčku NPM ke kopírování do schránky v Reactu

Pokud nechcete používat rozhraní API schránky přímo, existují více balíčků NPM místo toho můžete použít. Pro aplikace reakce můžete použít reagovat-kopírovat-do-schránky balík. Je velmi populární s více než 1 milionem stažení týdně a také se snadno používá.

Nainstalujte jej do aplikace React spuštěním následujícího příkazu v terminálu:

npm install react-copy-to-clipboard

Po instalaci importujte soubor Zkopírovat do schránky komponenta z reagovat-kopírovat-do-schránky do CopyButton komponent.

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

The Zkopírovat do schránky komponenta přijímá text, který chcete zkopírovat jako rekvizitu. Přijímá také podřízenou komponentu, která po kliknutí spustí akci kopírování.

Například pomocí níže uvedeného kódu zkopírujte do schránky pomocí tlačítka:

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

Všimněte si funkce manipulátoru, onCopy. Přijímá dva argumenty, text a výsledek kde text je zkopírovaný text a výsledkem je logická hodnota udávající, zda byla akce kopírování úspěšná či nikoli.

Proč používat funkci kopírování do schránky?

Naučili jste se používat rozhraní API schránky a balíček React-Copy-to-Clipboard ke kopírování textu do schránky v aplikaci React. Zatímco uživatelé vaší aplikace mohou jednoduše vybrat text a použít funkci kopírování vašeho prohlížeče, kliknutím zkopírujete text přímo a uživatelsky lépe.