Kako v aplikacijo React dodati funkcijo kopiranja v odložišče

Ročno kopiranje informacij, pa naj gre za delčke kode, povezave URL ali fragmente besedila, je lahko zamudno in nagnjeno k napakam, zlasti na mobilnih napravah z majhnim zaslonom. Dodajanje funkcije »kopiraj v odložišče« ne le prihrani čas, ampak tudi zmanjša možnost napak in tipkarskih napak.

Nastavitev funkcije kopiranja v odložišče

V aplikaciji React ustvarite novo komponento z imenom CopyButton. Ta komponenta sprejme besedilo, ki ga mora kopirati v odložišče.

Če nimate projekta React, na katerem bi delali, uporabite pripomoček za ustvarjanje aplikacije React na oder enega.

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

Ko ga kliknete, mora gumb poklicati imenovano funkcijo kopirati v odložišče ki kopira besedilo v odložišče.

Za izvedbo funkcije kopiranja lahko neposredno uporabite API odložišča ali uporabite paket NPM.

Ta vodnik vam bo pokazal, kako uporabljati oboje.

Uporaba API-ja odložišča za kopiranje besedila v odložišče v Reactu

The API za odložišče ponuja način za interakcijo z ukazi odložišča, kot so kopiranje, izrezovanje in lepljenje.

Za dostop do njega morate uporabiti navigator.odložišče predmet, ki je na voljo v večini sodobnih brskalnikov. Ima več metod, ki vam omogočajo pisanje ali branje vsebine odložišča.

Za pisanje v odložišče uporabite writeText metoda.

Poglejmo, kako to implementirati v kopirati v odložišče funkcija CopyButton komponento.

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 writeText metoda sprejme besedilo, ki ga bo kopirala v odložišče. Ta metoda je asinhrona, zato morate pred nadaljevanjem uporabiti ključno besedo await.

Če je besedilo kopirano v odložišče, prikažite sporočilo o uspehu, sicer prikažite sporočilo o napaki kot opozorilo.

Preverjanje dovoljenj brskalnika

Kot dobra praksa je pomembno zagotoviti, da je uporabnik brskalniku dovolil dostop do odložišča. Preverite lahko, ali je uporabnik odobril odložišče-pisati dovoljenje za uporabo navigator.dovoljenja Spletni API pred kopiranjem v odložišče, kot je prikazano spodaj.

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 zgoraj spremenjeni funkciji se vanj piše samo, če je uporabnik odobril pisanje v odložišče. V nasprotnem primeru funkcija vrže napako.

Uporaba paketa NPM za kopiranje v odložišče v Reactu

Če ne želite neposredno uporabljati API-ja odložišča, obstajajo več paketov NPM lahko uporabite namesto tega. Za aplikacije React lahko uporabite reagiraj-kopiraj-v-odložišče paket. Je zelo priljubljen z več kot 1 milijonom tedenskih prenosov in je tudi enostaven za uporabo.

Namestite ga v svojo aplikacijo React tako, da v terminalu zaženete naslednji ukaz:

npm install react-copy-to-clipboard

Ko je nameščen, uvozite Kopirati v odložišče komponenta iz reagiraj-kopiraj-v-odložišče v CopyButton komponento.

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

The Kopirati v odložišče komponenta sprejme besedilo, ki ga želite kopirati, kot prop. Sprejema tudi podrejeno komponento, ki ob kliku sproži dejanje kopiranja.

Na primer, uporabite spodnjo kodo za kopiranje v odložišče z gumbom:

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

Upoštevajte funkcijo upravljalnika, onCopy. Sprejema dva argumenta, besedilo in rezultat kjer je besedilo kopirano besedilo, rezultat pa je logična vrednost, ki označuje, ali je bilo kopiranje uspešno ali ne.

Zakaj uporabljati funkcijo kopiranja v odložišče?

Naučili ste se uporabljati API za odložišče in paket react-copy-to-clipboard za kopiranje besedila v odložišče v aplikaciji React. Medtem ko lahko uporabniki vaše aplikacije preprosto izberejo besedilo in uporabijo funkcijo kopiranja v vašem brskalniku, je klikanje za kopiranje besedila enostavnejše in boljše za uporabniško izkušnjo.