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í aplikace React k jeho vytvoření.

 function CopyButton({text}) {
    const copyToClipboard = () => {
        
    }
  return (
    <button onClick={copyToClipboard}>Copy</button>
  )
}
export default CopyButton
 

Po kliknutí by tlačítko mělo zavolat funkci s názvem copyToClipboard, 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 objekt navigator.clipboard dostupný ve většině moderních prohlížečů. Má několik metod, které umožňují zapisovat nebo číst obsah schránky.

Pro zápis do schránky použijte metodu writeText.

Podívejme se, jak to implementovat ve funkci copyToClipboard komponenty CopyButton.

 const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      alert('Text copied to clipboard:', text);
    } catch (error) {
      alert('Error copying to clipboard:', error);
    }
  };

Metoda writeText 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. Před kopírováním do schránky můžete zkontrolovat, zda uživatel udělil oprávnění k zápisu do schránky 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 copied to clipboard!');
        } else {
            throw new Error("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, můžete místo toho použít několik balíčků NPM. 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 komponentu CopyToClipboard ze složky Reagovat-kopírovat do schránky do komponenty CopyButton.

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

Komponenta CopyToClipboard 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:

 <CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
   <button>Copy</button>
</CopyToClipboard>

Všimněte si funkce handleru 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á nebo ne.

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

Naučili jste se, jak 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.