Ako pridať funkciu kopírovania do schránky do vašej aplikácie React

Manuálne kopírovanie informácií, či už ide o úryvky kódu, odkazy URL alebo textové fragmenty, môže byť časovo náročné a náchylné na chyby, najmä na mobilných zariadeniach s malou obrazovkou. Pridanie funkcie „kopírovať do schránky“ nielen šetrí čas, ale tiež znižuje možnosť výskytu chýb a preklepov.

Nastavenie funkcie kopírovania do schránky

V aplikácii React vytvorte nový komponent s názvom CopyButton. Tento komponent prijíma text, ktorý má skopírovať do schránky.

Ak nemáte projekt React, na ktorom by ste mohli pracovať, použite nástroj na vytvorenie reakcie na lešenie jeden.

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

Po kliknutí by tlačidlo malo vyvolať funkciu s názvom skopírovať do schránky ktorý skopíruje text do schránky.

Na implementáciu funkcie kopírovania môžete priamo použiť rozhranie API schránky alebo použiť balík NPM.

Táto príručka vám ukáže, ako používať oboje.

Použitie Clipboard API na kopírovanie textu do schránky v Reacte

The Rozhranie API schránky poskytuje spôsob interakcie s príkazmi schránky, ako je kopírovanie, vystrihnutie a prilepenie.

Na prístup k nemu musíte použiť navigátor.schránka objekt dostupný vo väčšine moderných prehliadačov. Má niekoľko metód, ktoré umožňujú zapisovať alebo čítať obsah schránky.

Ak chcete zapisovať do schránky, použite písaťText metóda.

Pozrime sa, ako to implementovať v skopírovať do schránky funkciu 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 písaťText metóda akceptuje text, ktorý skopíruje do schránky. Táto metóda je asynchrónna, takže pred pokračovaním musíte použiť kľúčové slovo wait.

Ak sa text skopíruje do schránky, zobrazte správu o úspechu, inak zobrazte chybovú správu ako výstrahu.

Kontrola povolení prehliadača

Ako osvedčený postup je dôležité zabezpečiť, aby používateľ udelil prehliadaču povolenie na prístup do schránky. Môžete skontrolovať, či používateľ udelil schránka-písať povolenie pomocou navigátor.povolenia Web API pred skopírovaním do schránky, ako je znázornené nižšie.

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 upravenej funkcii vyššie sa do schránky píše iba vtedy, keď používateľ udelil povolenie na zápis. V opačnom prípade funkcia vyvolá chybu.

Použitie balíka NPM na kopírovanie do schránky v aplikácii React

Ak nechcete priamo používať rozhranie API schránky, existujú viacero balíkov NPM namiesto toho môžete použiť. Pre aplikácie reakcie môžete použiť reagovať-kopírovať do schránky balík. Je veľmi populárny s viac ako 1 miliónom stiahnutí týždenne a tiež sa ľahko používa.

Nainštalujte ho do svojej aplikácie React spustením nasledujúceho príkazu v termináli:

npm install react-copy-to-clipboard

Po nainštalovaní importujte súbor Skopírovať do schránky komponent z reagovať-kopírovať do schránky do CopyButton komponent.

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

The Skopírovať do schránky komponent akceptuje text, ktorý chcete skopírovať ako rekvizitu. Akceptuje aj podradený komponent, ktorý po kliknutí spustí akciu kopírovania.

Napríklad použite kód nižšie na skopírovanie do schránky pomocou tlačidla:

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

Všimnite si funkciu obsluhy, onCopy. Prijíma dva argumenty, text a výsledok kde text je skopírovaný text a výsledkom je boolovská hodnota označujúca, či bola akcia kopírovania úspešná alebo nie.

Prečo používať funkciu kopírovania do schránky?

Naučili ste sa, ako používať rozhranie API schránky a balík React-Copy-to-Clipboard na kopírovanie textu do schránky v aplikácii React. Zatiaľ čo používatelia vašej aplikácie môžu jednoducho vybrať text a použiť funkciu kopírovania vášho prehliadača, kliknutím na kopírovanie textu je to jednoduchšie a lepšie pre používateľskú skúsenosť.